CODEWITHSUNDEEP
jqueryhtmljquery-ui-accordion
BigJobbies
BigJobbies

Reputation: 4343

jQuery accordion not working for me

Im looking for a bit of help using the jQuery accordion.

Basically, i have elements that arent the standard h3 and p tags that it requires out of the box.

The jQuery i have is as follows

<script>
jQuery(document).ready(function() {
    jQuery("#contentHolder").accordion({
        header: '.clicker'
    });
});
</script>

and the HTML that im using is as follows:

<div id="contentHolder">

<div id="recipe">
    <img src="style/img/rec-image.jpg"></img>
    <p><span style="color: #5C971C; font-weight: bold;">Stuffs M</span><br />stuff goes here</p>
    <p><a class="clicker" href="#"><img src="style/img/details-btn.jpg"></img></a></p>
    <div class="ingredients" style="margin-top: 136px;">
        <p style="width: 420px;"><span style="color: #5C971C; font-weight: bold;">Ingredients</span><br />2L white vinegar<br />2 cups water</p>
    </div>
</div>

<div id="recipe">
    <img src="style/img/rec-image.jpg"></img>
    <p><span style="color: #5C971C; font-weight: bold;">Stuffs M</span><br />stuff goes here</p>
    <p><a class="clicker" href="#"><img src="style/img/details-btn.jpg"></img></a></p>
    <div class="ingredients" style="margin-top: 136px;">
        <p style="width: 420px;"><span style="color: #5C971C; font-weight: bold;">Ingredients</span><br />2L white vinegar<br />2 cups water</p>
    </div>
</div>

</div>

How i want it to work, is when someone clicks on the .clicker href i want the div "ingredients" to slide up and down.

Im hoping someone can help :)

Cheers,

Upvotes: 1

Views: 4633

Answers (2)

scessor
scessor

Reputation: 16115

The accordion needs following structure:

<div id="contentHolder">
    <div class="clicker">
        <a href="#">first clickable</a>
    </div>
    <div>
        first content
    </div>

    <div class="clicker">
        <a href="#">next clickable</a>
    </div>
    <div>
        next content
    </div>
</div>

Also see your example working in this jsfiddle.

=== UPDATE ===

Although I had forgotten to say that this is not necessarily 'div' s need to act, but to each block element:

<div id="contentHolder">
    <p class="clicker">
        <a href="#">
            <img src="style/img/rec-image.jpg" /><br />
            <span style="color: #5C971C; font-weight: bold;">Stuffs M</span><br />
            stuff goes here<br />
            <img src="style/img/details-btn.jpg" />
        </a>
    </p>
    <p class="ingredients">
        <span style="color: #5C971C; font-weight: bold;">Ingredients</span><br />
        2L white vinegar<br />
        2 cups water
    </p>

    <p class="clicker">
        <a href="#">
            <img src="style/img/rec-image.jpg" /><br />
            <span style="color: #5C971C; font-weight: bold;">Stuffs M</span><br />
            stuff goes here<br />
            <img src="style/img/details-btn.jpg" />
        </a>
    </p>
    <p class="ingredients">
        <span style="color: #5C971C; font-weight: bold;">Ingredients</span><br />
        2L white vinegar<br />
        2 cups water
    </p>
</div>

Also see my updated jsfiddle.

Upvotes: 1

vinhboy
vinhboy

Reputation: 8982

According to jQuery UI Accordian docs

The content element must be always next to its header.

Your "clicker" is inside of a p-element

<p><a class="clicker" href="#"><img src="style/img/details-btn.jpg"></img></a></p>

Maybe put the "clicker" on the p-element? Or get rid of the p-element. Just make sure the div you are trying to show is the "next" element in the DOM.

Upvotes: 3

Related Questions