Reputation: 177
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
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
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
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