Show and Hide Muliple divs using jquery

Problem: Initially, all information tabs on the page need to be hidden. When a tab is clicked, it opens up to reveal the information. When another information tab is clicked,the first will close and the new information tab open.

Solution: This will be the structure of your template page:

[code language=”html”]
<div class="buttons">

<a class="moreInfoTab" target="1">Div 1</a>
<a class="moreInfoTab" target="2">Div 2</a>
<a class="moreInfoTab" target="3">Div 3</a>
<a class="moreInfoTab" target="4">Div 4</a>
</div>

<div id="div1" class="targetDiv">Lorum Ipsum1</div>
<div id="div2" class="targetDiv">Lorum Ipsum2</div>
<div id="div3" class="targetDiv">Lorum Ipsum3</div>
<div id="div4" class="targetDiv">Lorum Ipsum4</div>
[/code]

This will go in your footer or header

[code language=”javascript”]
<script>
jQuery(‘.targetDiv’).hide().css({opacity: 0});

jQuery(function(){

jQuery(‘.moreInfoTab’).click(function(){
jQuery(‘.targetDiv’).animate({
height: ‘hide’,
opacity: 1,
left: ‘+55px’
}, 1000
);
jQuery(‘#div’+$(this).attr(‘target’)).show("slow");
});

});
</script>
[/code]

The moreInfoTab and targetDiv can be styled as you wish in your CSS file. I have added a little animation, but it is not necessary.