user3258018 user3258018 - 5 months ago 15
jQuery Question

jQuery Click Multiple Buttons to View Multiple Content divs

I am trying to teach myself jQuery, but have run into a road block.

The goal is to have one div always show on my website, but have it change to a different div when the specific button is clicked.

There will be multiple buttons with at least two different contents to go along with it. I have figured out how to switch between two divs with one button, but I am having trouble with the second button.

If the main div is showing the first 'Section One' aka original div the second button will change the content to 'Section Two's content. However if someone has already pressed the Section One button and the second div/option is showing, the div content will not change if someone clicks on the Section Two button. Also, once someone has gotten to Section Two's last div option, it will not go back to the first option for that particular button.

I'd also like for people to be able to get back to Section One content after they have viewed Section Two.

Thank you in advance for your help.



$('#btnClick').on('click',function(){
if($('#1').css('display')!='none'){
$('#2').html($('#2').html()).show().siblings('div').hide();
}else if($('#2').css('display')!='none'){
$('#1').show().siblings('div').hide();
}
});
$('#btnClick2').on('click',function(){
if($('#1').css('display')!='none'){
$('#3').html($('#3').html()).show().siblings('div').hide();
}else if($('#3').css('display')!='none'){
$('#4').show().siblings('div').hide();
}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="1">
<p>Section one. Message one.</p>
</div>

<div id="2" style="display:none;">
<p>Section one. Message two.</p>
</div>

<div id="3" style="display:none;">
<p>Section two. Message one.</p>
</div>

<div id="4" style="display:none;">
<p>Section two. Message two.</p>
</div>
<button id="btnClick">Section one</button>
<button id="btnClick2">Section two</button>




Answer

In your JavaScript you have to add else statements as well to account for cases when both if and else if conditions are false.

$('#btnClick').on('click',function(){
 if($('#1').css('display') != 'none'){
$('#2').show().siblings('div').hide();
 } else if ($('#2').css('display')!='none'){
$('#1').show().siblings('div').hide();
 } else {
$('#1').show().siblings('div').hide();
 }
});

$('#btnClick2').on('click',function(){
  if($('#3').css('display')!='none'){
$('#4').show().siblings('div').hide();
  }else if($('#4').css('display')!='none'){
$('#3').show().siblings('div').hide();
  } else {
 $('#3').show().siblings('div').hide();;
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="1">
<p>Section one. Message one.</p>
</div>

<div id="2" style="display:none;">
<p>Section one. Message two.</p>
</div>

<div id="3" style="display:none;">
<p>Section two. Message one.</p>
</div>

<div id="4" style="display:none;">
<p>Section two. Message two.</p>
</div>
<button id="btnClick">Section one</button>
<button id="btnClick2">Section two</button>

Comments