Show/Hide Multiple Divs with jQuary

This simple little script will show or hide multiple divs like question to answer style.

To  ensure jQuery is working add this line inside head tag

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

After that there is a little bit of CSS

<style type="text/css">
#latestNewsJs {
    width:106px;
    min-height:100%;
}
#lnClickDivs1 {}
#lnClickDivs2 {}
#lnClickDivs3 {}
#lnClickDivs4 {}

.sideJsBtns {
	cursor:pointer;
    width:300px;

    float:left;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius:5px 5px 5px 5px;
    background-color: #B38FF2;
	margin-top: 2px;
	padding: 3px 3px 3px 3px;
}

#hiddenDiv1 {}
#hiddenDiv2 {}
#hiddenDiv3 {}
#hiddenDiv4 {}

.secretDiv {
    background-color: #B38FF2;
    width:280px;
    display:none;
    padding-left: 10px;
    float:left;
	-webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius:0px 0px 5px 5px;
}
</style>

And the main jQuary cod after CSS:

<script type="text/javascript">
jQuery.noConflict();

jQuery(document).ready(function(){         

    var curI = 0;

    jQuery('.sideJsBtns').click(function(){

        //index() gets index value started from 0 - Id values starts from 1, that's why the + 1.
        curI = jQuery(this).index('.sideJsBtns') + 1;

        jQuery(".secretDiv").not("#hiddenDiv" + curI).slideUp("medium");

        jQuery("#hiddenDiv" + curI).slideToggle("medium");

    });

});
</script>

After we closed the head tag lets insert the divs inside the body:

<div id="latestNewsJs">
    <div id="lnClickDivs1" class="sideJsBtns sidejsbtn1" >1. Question
    <div id="hiddenDiv1" class="secretDiv">Answer 1. </div></div>
    <div id="lnClickDivs2" class="sideJsBtns sidejsbtn2">2. Question
    <div id="hiddenDiv2" class="secretDiv">Answer 2. </div></div>
    <div id="lnClickDivs3" class="sideJsBtns sidejsbtn3">3. Question
    <div id="hiddenDiv3" class="secretDiv">Answer 3. </div></div>
    <div id="lnClickDivs4" class="sideJsBtns sidejsbtn4">4. Question
    <div id="hiddenDiv4" class="secretDiv">Answer 4. </div></div>
</div>

And that’s it check the demo of this script!