Toggle Div Content with toggle or show/hide

0
votes

I am looking to get some guidance with a simple jquery problem.

I am trying to show/hide content when I press buttons. I have 2 buttons. I want one button to show the content of 1 div and I want the other button when pressed to hide the content of the first div and show the content of 2nd div.

I created a JSFiddle here http://jsfiddle.net/Yn3tt/1/

My thinking was that I could toggle a class called noDisplay which would get set on the div I don't want to show (thus hiding it) I am not sure of the jquery to do this?

I am also not sure if this is easier to use the jquery show/hide class to achieve this?

Thanks

My HTML is as follows

<button id="opt1">Option 1</button>
<button id="opt2">Option 2</button>

<div class="yesDisplay">
<p>Show me when I press Option 1 and hide Option 2 content</p>
</div>

<div class="noDisplay">
<p>Show me when I press Option 2 and Hide Option 1 content</p>
</div>

and my CSS is simply

.noDisplay{display:none;}

.yesDisplay{display:block;}

demo is here http://jsfiddle.net/Yn3tt/1/

3
javascriptjquerytoggleshow-hide
You might want to rethink your class naming and usage. Looks like it might lead to some confusions with negation. parhaps .hidden {display:none;} and toggle that class with jquery - Urban Björkman
@UrbanBjörkman good point! although the show hide example seems to work well below...Not sure how to do the toggle method - Redwall

3 Answers

3
votes

use hide() show() jquery function..click() event to fire when click...I made this as simple as possible so that you will easily understand

CSS

.noDisplay{display:none;}
.yesDisplay{display:none;}

JQUERY

 $('#opt1').click(function(){
     $('.yesDisplay').show(); //class selector for the div to show
     $('.noDisplay').hide();
 });

$('#opt2').click(function(){
     $('.noDisplay').show();
   $('.yesDisplay').hide();
});

however you can use function like.. toggle() slideToggle() to reduce your code

fiddle here

1
votes

Updated your fiddle: http://jsfiddle.net/Yn3tt/3/

$('#opt1').click(function(){
    $('.yesDisplay').show();
    $('.noDisplay').hide();
});

$('#opt2').click(function(){
    $('.yesDisplay').hide();
    $('.noDisplay').show();
});
1
votes
u can do this without css ,i mean using jquery
<script>
      $(".yesDisplay").hide();
      $(".noDisplay").hide();
  $("#opt1").click(function(){
      $(".yesDisplay").show();
     $(".noDisplay").hide();
});


  $("#opt2").click(function(){
      $("noDisplay").show();
     $(".yesDisplay").hide();
});
</script>

<button id="opt1">Option 1</button>
<button id="opt2">Option 2</button>

<div class="yesDisplay">
<p>Show me when I press Option 1 and hide Option 2 content</p>
</div>

<div class="noDisplay">
<p>Show me when I press Option 2 and Hide Option 1 content</p>
</div>

u can check here http://jsfiddle.net/Yn3tt/7/