Expand and collapse on click of link using jquery mobile

Question

I want to expand and collapse list contents when click on links like "more" and "less" using jquery mobile. is it possible? Kindly help.

Thanks

Answer 1

Hi refre this link http://jsfiddle.net/KqFRu/7/

<div>
    <fieldset class="majorpoints">
    <legend class="majorpointslegend">Expand</legend>
    <div class="hiders" style="display:none" >
        <ul>
            <li>cccc</li>
            <li></li>
        </ul>
    </div>
</div><div>
    <fieldset class="majorpoints">
    <legend class="majorpointslegend">Expand</legend>
    <div class="hiders" style="display:none" >
        <ul>
            <li>cccc</li>
            <li></li>
        </ul>
    </div>
</div><div>
    <fieldset class="majorpoints">
    <legend class="majorpointslegend">Expand</legend>
    <div  class="hiders" style="display:none" >
        <ul>
            <li>cccc</li>
            <li></li>
        </ul>
    </div>
</div><div>
    <fieldset class="majorpoints">
    <legend class="majorpointslegend">Expand</legend>
    <div class="hiders" style="display:none" >
        <ul>
            <li>cccc</li>
            <li></li>
        </ul>
    </div>
</div>

and JS

$('.majorpoints').click(function(){
    $(this).find('.hiders').toggle();
});

Answer 2

Nicest solution is to not use javascript at all. Check it out here: https://jsfiddle.net/zx3du1p6/1/

input[type="checkbox"] {
    display: none;

    &:checked ~ .list-item {
        display: block;
    }
}

.list-item {
    display: none;
}

This uses jquery: https://jsfiddle.net/zx3du1p6/

$('button').click(function() {
    $('li').toggleClass('open')
})

If you absolutely have to use jquery mobile, you can use the collapsible set: https://jsfiddle.net/zx3du1p6/2/

<div data-role="collapsibleset" data-theme="a" data-content-theme="a">
    <div data-role="collapsible">
        <h3>Load more</h3>
    <p>List goes here</p>
    </div>
</div>