CODEWITHSUNDEEP
javascriptjqueryhtml
perqedelius
perqedelius

Reputation: 105

Show/ hide multiple divs with closing function

I almost give up. Can't find any solution on this so I hope you can help me. I have a script that shows/hides divs and it's working like this. If you click one button a div shows and if you press another button it switches to that div. That's working great. But I want to be able to close all divs with the last button clicked.

This is my HTML

<div class="hidden-divs-buttons">                   
    <a class="show-div btn" target="1">Div 1</a>
    <a class="show-div btn" target="2">Div 2</a>
</div>

<div class="hidden-divs">
    <div id="div1" class="target-div">Content div 1</div>
    <div id="div2" class="target-div">Content div 2</div>
</div>

This script works but has no closing functionality 

$('.show-div').click(function() {
  $('.target-div').hide();
  $('#div' + $(this).attr('target')).fadeIn(1000);        
});

And this is the script I want to replace the working script with. I have been trying to change it to work with closing function. I might be totally of but hopefully you guide in the right direction. I get an error that tell me "box.hasClass() isn't a function".

$('.show-div').click(function() {
  var box = $('#div' + $(this).attr('target'));
  $('.target-div').hide();

  if(box.hasCLass('close-div')) {
      box.removeClass('close-div');
      $('.target-div').fadeOut(1000);
  } else {
      box.fadeIn(1000);
      box.addClass('close-div');
  }

});

Edit Id's are updated.

This is how the code became. With this code I can click on a button and show a div, click the next one to show another div. If I click the same button again it will close all divs.

$('.show-div').click(function() {
  var box = $('#div' + $(this).attr('target'));  

  if(box.hasClass('close-div')) {
      $('.target-div').removeClass('close-div');
        $('.target-div').fadeOut(1000);   
  } else {
      $('.target-div').removeClass('close-div');
      $('.target-div').hide();
      box.fadeIn(1000);
      box.addClass('close-div');
  }   
});

Upvotes: 0

Views: 209

Answers (2)

vogomatix
vogomatix

Reputation: 5041

hasClass does not have a capital L - it's hasClass not hasCLass not sure if this is just a typo in the question or your real code.

Also both your divs in the hidden-divs section have the same id of div1, when they should presumably be div1 and div2. In any event it would be better to specify the full id of the div as the target instead of building it.

In addition, you are applying hide to all elements of class target-div before fading them out, which rather defeats the idea of a fadeout

<div class="hidden-divs-buttons">                   
    <a class="show-div btn" target="div1">Div 1</a>
    <a class="show-div btn" target="div2">Div 2</a>
</div>

<div class="hidden-divs">
    <div id="div1" class="target-div">Content div 1</div>
    <div id="div2" class="target-div">Content div 2</div>
</div>

$('.show-div').click(function() {
  var box = $('#' + $(this).attr('target'));

  // this makes them invisible, so fadeOut is pointless
  $('.target-div').hide(); 

  if(box.hasClass('close-div')) {
      box.removeClass('close-div');
      $('.target-div').fadeOut(1000);
  } else {
      box.fadeIn(1000);
      box.addClass('close-div');
  }

});

Upvotes: 1

Jarosław Milewski
Jarosław Milewski

Reputation: 29

You have typo in if(box.has[CL]ass('close-div')) { hasClass not hasCLass

Upvotes: 2

Related Questions