0

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

Praveen Kumar
  • 21
  • 4
  • Did you try something? Could you share your code? – Martin Gottweis Jun 13 '16 at 07:00
  • Hi Martin, I haven't started to code. Just have an requirement. Basically, when i click on "more" link, the list should expand and vice-versa. – Praveen Kumar Jun 13 '16 at 07:06
  • You should always try to code first before asking. However checkout my answer. You can do this with css only. Best practice is to avoid javascript if possible. – Martin Gottweis Jun 13 '16 at 07:10
  • @PraveenKumar You should try something by yourself. Use Google for the answer! If you tried for a couple hours and it still don't work, come back again! – Marten Jun 13 '16 at 07:13
  • thanks for the suggestions. I had tried and couldn't find the solutions, so turnedup to stackoverflow. anyways I figured out the answer. – Praveen Kumar Jun 13 '16 at 11:01

2 Answers2

0

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();
});
Gayathri Mohan
  • 2,924
  • 4
  • 19
  • 25
0

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>
Martin Gottweis
  • 2,721
  • 13
  • 27