CODEWITHSUNDEEP
javascriptjqueryhtmlcontainers
ragebunny
ragebunny

Reputation: 1760

JQuery container manipulation

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.

Upvotes: 1

Views: 926

Answers (5)

Antonio Novoselnik
Antonio Novoselnik

Reputation: 141

You could hide all the content but the first one like this:

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

        jQuery(".heading").click(function() {
            jQuery(".content").slideUp();
            jQuery(this).next(".content").slideToggle(500);
        });​
    });
</script>

Upvotes: 3

bobthyasian
bobthyasian

Reputation: 943

$(function() {
    $('.content').hide();
    $('.content:first').show();

    $('.heading').click(function() {
        $('.content').hide();
        $(this).next('.content').slideToggle(500);
    });
});​

Upvotes: 0

Jai
Jai

Reputation: 74738

you can add one line to your code:

      jQuery(this).next(".content").slideToggle(500);
      jQuery(this).parent().siblings().children(".content").slideUp(500);
    //this will find all other .content open and closes when other link cliked.

and the click event to the first heading:

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

Upvotes: 0

Thomas Ruiz
Thomas Ruiz

Reputation: 3661

<script type="text/javascript">
    jQuery(document).ready(function() {
      jQuery(".content").hide();
      //toggle the componenet with class msg_body

      jQuery(".heading").click(function()
      {
        jQuery("article.opened div.content").hide().parent().removeClass('opened');
        jQuery(this).parent().addClass('opened');
        jQuery(this).next(".content").slideToggle(500);
      });

      jQuery(".heading:first").click();​
    });
</script>

Upvotes: 0

karim79
karim79

Reputation: 342695

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.

Upvotes: 2

Related Questions