Question

I have a jQuery accordion that breaks when I need to place a div-tag in one of the sliding open areas.. How do I get around this? I need to put a div-tag since I cannot make a nice box out of a span-tag. Anyone knows a way around this??

Please see my demo here to see where it breaks 🙁

http://jsfiddle.net/zRqYM/

Answer 1

You should probably change this:

$(this).next("p").slideToggle("slow")
       .siblings("p:visible").slideUp("slow");

to:

$(this).next("div").slideToggle("slow")
       .siblings("div:visible").slideUp("slow");

and the CSS:

.accordion2 > div {
    background: #f7f7f7;
    /* etc... */

It makes more sense to use a DIV instead of P if you want to put other elements inside the expandable content: http://jsfiddle.net/zRqYM/13/

Or just use inline elements inside the P tag and style them to display:block;, but it doesn’t make semantic sense to me.