CODEWITHSUNDEEP
javascriptjquery
Thomas Littler
Thomas Littler

Reputation: 177

Expand/collapse all lists in jquery

I'm trying to place a button on a webpage that uses jquery to structure collapsible lists to expand/collapse all lists. However, I'm fairly new to jquery and javascript coding so I've run into a few problems. I've placed the button in but the code for it is not responding and upon clicking it I receive this error in the inspector: "TypeError: HTMLInputElement is not a function (evaluating 'ShowHide()')" How would I go about correcting this code so it successfully expands/collapses?

The code for the button is here:

<script type="text/javascript" src="js/jquery-1.11.2.min.js">
document.getElementById('collapsible').addEventListener("click", ShowHide);

var collapsed = $('collapsible').hide();

function ShowHide(event) {

    if (collapsed == true) {
        $('collapsible').show();
        collapsed = false;
    }
    else {
        $('collapsible').hide();
        collapsed = true;
    }
}
</script>

The id "collapsible" is placed on each ul and li element that is being expanded/collapsed.

The button is placed in as so:

<input type="button" id="ShowHide" onclick="ShowHide()" value="Show/Hide">

EDIT: I've been trying to do an expand/collapse all to be used on this layout. jsfiddle.net/TLittler/9ndzm3cc

Upvotes: 2

Views: 2618

Answers (3)

Danyal Fayyaz
Danyal Fayyaz

Reputation: 51

You can try doing this. This can be done in a few lines that's the beauty of jquery :). Here is the code try it out :

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$("#ShowHide").click(function() {
    if($("#collapsable").is(":hidden"))
        $("#collapsable").show("fast");
    else $("#collapsable").hide("slow");;
});
});         
    </script>



<div id="collapsable">Hello</div>
<input type="button" id="ShowHide"  value="Show/Hide">

Upvotes: 0

user4639281
user4639281

Reputation:

This is how I would go about achieving the effect you're looking for.

$('#collapsible1').click("click", showHide);

var collapsible = $('.collapsible');
collapsible.hide();

function showHide() {
    if(collapsible.is(':hidden'))
        collapsible.show();
    else
        collapsible.hide();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="collapsible1">Collapse</button>
<dl class="collapsible">
  <dh>List Header 1</dh><dl>List Item</dl><dl>List Item</dl><dl>List Item</dl>
</dl>
<dl class="collapsible">
  <dh>List Header 2</dh><dl>List Item</dl><dl>List Item</dl><dl>List Item</dl>
</dl>
<dl>
  <dh>List Header 3</dh><dl>List Item</dl><dl>List Item</dl><dl>List Item</dl>
</dl>

Upvotes: 3

Filthy_Rich
Filthy_Rich

Reputation: 665

document.getElementById('collapsible1').addEventListener("click", ShowHide);

var collapsed = $('collapsible').hide();

$('#ShowHide').click(function ShowHide(event) {

    if (collapsed == true) {
        $('collapsible').show();
        collapsed = false;
    }
    else {
        $('collapsible').hide();
        collapsed = true;
    }
})

You shouldn't use onclick(), it's bad practice.

Also, you have 'collabsible' and 'collapsible1'. I assume 'collapsible' is the item you wish to collapse?

Upvotes: 1

Related Questions