Question

I've created an accordion on my page and I would like to be able to have some hyperlinked text within each pane that has expanded.

When you click the link 'Reduce text', it will need to collapse the accordion.

How can this be done by editing the existing code I have used?

jQuery:

$(function() {
    $( "#accordion" ).accordion({
        active: false,
        collapsible: true,
        heightStyle: "content",
        navigation: true,
        header: ".menuitem"
     });

    var hash = window.location.hash;
    var anchor = $('a[href$="'+hash+'"]');
    if (anchor.length > 0){
        anchor.click();
    }
});

HTML:

<div id="accordion">
<h3 class="menuitem">Item 1</h3>
<div>
<p>Blah blah blah</p>
<a href="#">Reduce text</a>
</div>

<h3 class="menuitem">Item 1</h3>
<div>
<p>Blah blah blah</p>
<a href="#">Reduce text</a>
</div>

<div id="accordion">
<div>
<h3 class="menuitem">Item 1</h3>
<p>Blah blah blah</p>
<a href="#">Reduce text</a>
</div></div>

JS Fiddle: http://jsfiddle.net/EA22W/

Hope I've explained well and the question makes sense.

Thanks

Était-ce utile?

La solution

I added an on click event on the anchor element that closes its corresponding accordion item:

$(function() {
$( "#accordion" ).accordion({
    active: false,
    collapsible: true,
    heightStyle: "content",
    navigation: true,
    header: ".menuitem"
 });

var hash = window.location.hash;
var anchor = $('a[href$="'+hash+'"]');
if (anchor.length > 0){
    anchor.click();
}

//$("#accordion").on('click', '.ui-accordion-content a', function(){
$("#accordion").on('click', '.ui-accordion-content .reduce', function(){ //edit
    $(this).parent().slideToggle();
});
});

Autres conseils

Here is the code which can help you.

Code

function accordianReduce(){
    $( "#accordion" ).accordion({
        active: false,
        collapsible: true,
        heightStyle: "content",
        navigation: true,
        header: ".menuitem"
     });  
}
accordianReduce()
$('.reduce').on('click', function(){
    accordianReduce() 
})

Fiddle Demo

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top