Question

First off I’m not 100% sure how to title this page so please edit if you can.

So I’m Learning so jQuery, I want a system that has a number of articles on a page, when the page is first loaded i want the first article to be displayed and all other articles to be reduced to either their heading text or a set height.

Now I have a system that will open and close the containers, it looks like that:

<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery(".content").hide();

        //toggle the component with class msg_body
        jQuery(".heading").click(function() {
            jQuery(this).next(".content").slideToggle(500);
        });
    });
</script>

my Mark up is this:

<div class="page_content">
    <h1 align="center">Updates</h1>
    <article class="update_article">
        <h2 class="heading">13/12/2012 - Article Heading</h2>
        <div class="content">
            Article Body
        </div>
    </article>

    <article class="update_article">
        <h2 class="heading">13/12/2012 - Article Heading</h2>
        <div class="content">
            Article Body
        </div>
    </article>
</div>  

When this runs, all articles will be reduced to just their headings, once they have been clicked jQuery will open the body.

So I want to know how I would go about firstly opening the first article when the page is loaded, but I would also like for the system to close the open article when a different one is clicked and opened.

Thanks for you help and any tutorials or reading information for this subject is very welcome.

Answer 1

jQuery(".content").hide();
//toggle the componenet with class msg_body
jQuery(".heading").click(function() {
    jQuery(".content").slideUp();
    jQuery(this).next(".content").slideToggle(500);
});

jQuery(".heading:first").click();​

Demo.

You can slightly enhance it to not slide in/out the currently shown article, e.g.:

jQuery(".content").hide();
//toggle the componenet with class msg_body
jQuery(".heading").click(function() {
    var $nextContent = jQuery(this).next(".content");
    jQuery(".content").not($nextContent).slideUp();
    jQuery(this).next(".content").slideToggle(500);
});

jQuery(".heading:first").click();​

…but it depends on what your exact requirements are.

Demo.