Question

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/

Answer 1

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