Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Jquery expand Re: Jquery expand

#120839
Mottie
Member

Sure @chrisburton! Oh and the reason why the second article wasn’t working was because there wasn’t a `

` wrapping the content.

Well @wragen22… the HTML markup is really really bad. I’m not sure why you have an `

    ` wrapping the entire thing, but you’re not really supposed to put divs immediately inside of it. If you’re trying to keep the numbering system, then that’s fine, but use `

  1. `’s!

    Once I cleaned up the HTML, I ended up with [this demo](http://codepen.io/Mottie/pen/BLzpf) and this basic HTML:

    1. Title #

      Text.

      Text.

    And this jQuery:

    $(function(){

    $(‘.grid h1’).addClass(‘pointer’).click(function() {
    var $article = $(this).closest(“.grid”),
    $siblings = $article.find(“p,.right-module”)
    if ($article.hasClass(‘expanded’)) {
    $siblings.slideToggle(‘slow’, function() {
    $article.removeClass(‘expanded’);
    });
    } else {
    $article.addClass(‘expanded’);
    $siblings.slideToggle(‘slow’);
    }
    });

    });

    I know the `right-module` doesn’t line up with the top of the Title like the original, but that’s just some css tweaking ;P