Div content vertical accordion

1
votes

I have vertical div list and I am trying to create a content accordion.

The layout looks like approximately like this:

<div class='item'>
   <li class='title'>...some a tag here...</li>
   <div class='content'></div>
</div>
<div class='item'>
   <li class='title'>...some a tag here...</li>
   <div class='content'></div>
</div>

div class item should be listed one below other, div class content should be hidden, and on click div class item, the content should expand vertically.

Can someone make me a basic setup? I cant get this going.

Keep in mind that its not necessary to have exact same layout (div and li elements within), I can change this and modify on my side if there is a better way to organize this.

I am using jquery.

2
jqueryaccordion
check my answer please - thenewseattle
Please note that it is also invalid HTML to place <li> tags inside anything other than <ul> or <ol> tags. Whilst this will still render it is not inline with HTML specs. - Nunners
Yes, I understand that, I was just shortening code for the demo. - Toniq
@Toniq please check my answer. and tick the green mark if it helped your needs. - thenewseattle

2 Answers

2
votes

you didn't need any jquery plugin check this http://jsfiddle.net/modaloda/3R2Jd/1/

        $(document).ready(function () {

        $(".title").click(function () {

            $(".content").slideUp("fast");

            $(this).find('.expand').removeClass('collapse');
            if ($(this).next().is(":hidden") == true )
            {
                $('.expand').removeClass('collapse');
                $(this).next().slideDown("normal")
                $(this).find('.expand').addClass('collapse');
            }
        }); 
    });
0
votes

It is much easier to use 3rd Party tools to do features like this, there a hundreds of plugins to add this functionality and many of them are free.

One of my personal favourites (and I don't doubt one of the Community favourites) is jQuery UI

jQuery UI has an Accordion feature that can be easily used.

See here for examples

You simply add the plugin to the page and structure your content in a certain way to make this work.

Example : 

<div id="accordion">
   <h3>...some a tag here...</h3>
   <div class='content'></div>
   <h3>...some a tag here...</h3>
   <div class='content'></div>
</div>

jQuery : $( "#accordion" ).accordion();

And now you have fully working jQuery Accordions! There are many different properties that you can change to make it more customized.