How can I refactor this javascript code?

Question

on click on boxes(It telecom, oil & gas and baking), I want to show and hide the content in div(dynamic-content).

enter image description here

Please check the html code

changeContent:function(){
		$('.it-telecom-content').show();
		$(document).on('click',".it-telecom",function(){
			$('.banking-content , .oil-gas-content').hide();			
            $('.it-telecom-content').show();
		});
		$(document).on('click',".banking",function(){
			$('.it-telecom-content,.oil-gas-content').hide();
            $('.banking-content').show();
		});
		$(document).on('click',".oil-gas",function(){
			$('.it-telecom-content,.banking-content').hide();
            $('.oil-gas-content').show(); 
		});
	}
     here in changeContent function , I have written three click function ,      **how I can write one generic function to achieve this.**

.industries-section .dynamic-content{
    padding: 0 0 40px 0;
    /*border-bottom: 2px solid #f8b412;*/
}
.industries-section .oil-gas-content{
    display:none;
}
.industries-section .it-telecom-content{
    display:none;
}
.industries-section .banking-content{
    display:none;
}

<div class="row">
                    <div class="col-md-4 col-lg-4">&nbsp;</div>
                    <div class="col-md-4 col-lg-4">&nbsp;</div>
                    <div class="col-md-4 col-lg-4">                        
                        <div class="dynamic-content it-telecom-content option animated fadeInRight">
                            <p class="subtitle">We enable , encourage and elevate tailor made, recruitment services across various Telecom services</p>
                            <p>we achieve excellence by consistently recruiting right person ar the right time with he highest degree of integrity an self belief</p>
                            <a href="#">LEARN MORE <i class="fa fa-long-arrow-right" aria-hidden="true"></i>
                            </a>
                        </div>
                        <div class="dynamic-content oil-gas-content option animated fadeInRight">
                            <p class="subtitle">We enable , encourage and elevate tailor made, recruitment services across various Oil & Gas services</p>
                            <p>we achieve excellence by consistently recruiting right person ar the right time with he highest degree of integrity an self belief</p>
                            <a href="#">LEARN MORE <i class="fa fa-long-arrow-right" aria-hidden="true"></i>
                            </a>
                        </div>
                        <div class="dynamic-content banking-content option animated fadeInRight">
                            <p class="subtitle">We enable , encourage and elevate tailor made, recruitment services across various Banking services</p>
                            <p>we achieve excellence by consistently recruiting right person ar the right time with he highest degree of integrity an self belief</p>
                            <a href="#">LEARN MORE <i class="fa fa-long-arrow-right" aria-hidden="true"></i>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="row below-content">                   
                    <div class="col-md-4 col-lg-4">
                        <div class="it-telecom">
                            <h1>IT & Telecom</h1>
                            <p>IT & Telecom IT & Telecom IT & Telecom IT & Telecom IT & Telecom IT & Telecom IT & Telecom IT & Telecom IT & Telecom IT & Telecom IT & Telecom IT & Telecom </p>
                        </div>
                    </div>
                    <div class="col-md-4 col-lg-4">
                        <div class="oil-gas">
                            <h1>Oil & Gas</h1>
                            <p>Oil & Gas Oil & Gas Oil & Gas Oil & Gas Oil & Gas Oil & Gas Oil & Gas Oil & Gas Oil & Gas Oil & Gas Oil & Gas</p>
                        </div>
                    </div>
                    <div class="col-md-4 col-lg-4">
                        <div class="banking">
                            <h1>Banking</h1>
                            <p>Banking Banking Banking Banking Banking Banking Banking Banking Banking Banking Banking Banking Banking</p>
                        </div>
                    </div>
                </div>

How can I refactor the above code? If you need more clarification, I can add some.

Mitsu GM · Accepted Answer · 2016-05-20 15:54:38Z

Add a class active in order to determine who's data is showing already. Then, add a data-content attribute and store into the class of the div with it's information. Then, when you clicked a box (IT, OIL, etc.) hide the active information box and show the correspondent to the clicked box.

// by default just show the first box
$('.container div:not(.active)').fadeOut(0);

$('.left div').on('click', function() {
	// remove active class and hide the box
  $('.container div.active').removeClass('active').fadeOut(500);
  // extract the clicked box data-content attribute,
  // select it and show up
	const clazz = $(this).attr('data-content');
  window.setTimeout(() => $(`.${clazz}`).addClass('active').fadeIn(500), 250);
});

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600);
* {
  box-sizing: border-box;
}

body {
  display: flex;
}

.left {
  align-items: center;
  border-right: 2px solid #ddd;
  display: flex;
  height: 100vh;
  justify-content: space-between;
  overflow: auto;
  padding: 1rem 2rem;
  width: 60%;
}

.right {
  height: 100vh;
  text-align: center;
  width: 40%;
}

.left div {
  background-color: gold;
  color: #444;
  cursor: pointer;
  font-family: 'open sans';
  height: 130px;
  line-height: 130px;
  text-align: center;
  width: 130px;
}

.container {
  border: 1px solid #ccc;
  height: 200px;
  margin: 40px auto;
  overflow: hidden;
  position: relative;
  width: 200px;
}

.container div {
  background-color: white;
  height: 100%;
  left: 0;
  padding: 10px;
  position: absolute;
  top: 0;
  width: 100%;
}

p {
  color: #444;
  font-family: 'open sans';
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="left">
  <div class="it-telecom" data-content='it-telecom-content'>
    IT & TELECOM
  </div>
  <div class="oil-gas" data-content='oil-gas-content'>
    OIL & GAS
  </div>
</section>

<section class="right">
  <div class="container">
    <div class="it-telecom-content active">
      <p>
        this is the description for it & telecom
      </p>
    </div>
    <div class="oil-gas-content">
      <p>
        this is the description for oil & gas
      </p>
    </div>
  </div>

</section>

Collectives™ on Stack Overflow

How can I refactor this javascript code?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related