CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-ui-accordion
Marcus Silverman
Marcus Silverman

Reputation: 243

Div breaks jQuery accordion

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/

Upvotes: 0

Views: 1755

Answers (6)

jungy
jungy

Reputation: 3087

I've updated your jsfiddle: http://jsfiddle.net/zRqYM/21/ and changed your p tags to div tags since it allows the most tag nesting.

As a general rule, a div tag cannot be inside of a p tag since it will cause the p tag to close itself.

Upvotes: 1

mithilatw
mithilatw

Reputation: 908

There is a different way to try your accordion without messing around with CSS

Get your HTML done as follows;

<div id='accordion'>
 <h3>Title of the view</h3>
 <div>
  all the stuff you want to do here
 </div>
 <h3>Title of the view</h3>
 <div>
  all the stuff you want to do here
 </div>
</div>

and make your script file as

 $('#accordion').accordion({ active: 0 });

For more info: visit http://jqueryui.com/demos/accordion

Upvotes: 1

David Hellsing
David Hellsing

Reputation: 108500

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.

Upvotes: 1

ech
ech

Reputation: 141

You can use a span-tag. All you need to do is add the following styling for your span-tag class in the css

.whatever {
    border: 1px solid #000;
    display: inline-block;
    margin: 0 5px;
}

Upvotes: 1

user1602981
user1602981

Reputation: 11

Why cant you put it in a span and style the span as a nice box with display block?

Upvotes: 1

Graham Clark
Graham Clark

Reputation: 12966

This seems a bit lame, but you can use a span and just set it to display: block. Then it's essentially a div: http://jsfiddle.net/zRqYM/5/

Upvotes: 1

Related Questions