3
\$\begingroup\$

My code works perfectly but it is redundant. How does one condense this? How do you use the =! operator? Any help would be greatly appreciated.

$("#about").click(function(){
  $( ".home" ).hide();
  $( ".headr" ).show();
  $( ".about" ).show();
  $( ".skills" ).hide();
  $( ".experience" ).hide();
  $( ".education" ).hide();
  $( ".examples" ).hide();
  console.log("about clicked");
});

$("#skills").click(function(){
  $( ".home" ).hide();
  $( ".headr" ).show();
  $( ".about" ).hide();
  $( ".skills" ).show();
  $( ".experience" ).hide();
  $( ".education" ).hide();
  $( ".examples" ).hide();
  console.log("skills clicked");
});

$("#experience").click(function(){
  $( ".home" ).hide();
  $( ".headr" ).show();
  $( ".about" ).hide();
  $( ".skills" ).hide();
  $( ".experience" ).show();
  $( ".education" ).hide();
  $( ".examples" ).hide();
  console.log("experience clicked");
});

$("#education").click(function(){
  $( ".home" ).hide();
  $( ".headr" ).show();
  $( ".about" ).hide();
  $( ".skills" ).hide();
  $( ".experience" ).hide();
  $( ".education" ).show();
  $( ".examples" ).hide();
  console.log("education clicked");
});

$("#examples").click(function(){
  $( ".home" ).hide();
  $( ".headr" ).show();
  $( ".about" ).hide();
  $( ".skills" ).hide();
  $( ".experience" ).hide();
  $( ".education" ).hide();
  $( ".examples" ).show();
  console.log("examples clicked");
});
\$\endgroup\$
2
\$\begingroup\$

1) Add another common class (using toggle in the example) to all of your tags

<div class="toggle home">data</div>
<div class="toggle headr">data</div>
<div class="toggle about">data</div>
<div class="toggle skills">data</div>
<div class="toggle experience">data</div>
<div class="toggle education">data</div>
<div class="toggle examples">data</div>

2) on your click handler add data tags (using data-show in this example) for what you want to show

<button data-show="home">home</button>
<button data-show="headr">header</button>
<button data-show="about">about</button>
<button data-show="skills">skills</button>
<button data-show="experience">experience</button>
<button data-show="education">education</button>
<button data-show="examples">examples</button>

3) Set up one function to handle all clicks

$('button').click(function(event) {
  $('.toggle').hide();
  $('.' + event.currentTarget.data.show).show();
  console.log(event.currentTarget.data.show + ' clicked');
});
\$\endgroup\$
  • 1
    \$\begingroup\$ You probably want to use event.currentTarget.dataor this.data` instead of event.data. \$\endgroup\$ – Marc Rohloff Sep 1 '18 at 0:08
0
\$\begingroup\$

A sugestion I can give to you is to cache your DOM elements like this:

var about = $('#about');
var home = $('.home'):

ecc.. Using this way you can have a code more readable

about.click(function(){
  home.hide();
  ecc..
  console.log("about clicked");
});

Another suggestion as mentioned in the above answer is to create a class that you can add to the elements you need to hide.

<button class=".hidden">home</button>
<button class=".visible">about</button>

.hidden{
 display: none;
}

.visible{
 display: block;
}

home.on('click', function(e){
  about.toggleClass('hidden');
});
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.