[ How do I toggle/collapse a javascript element (I want to collapse the html by default) ]
Hi I need help with my code to make the below html collapse because it does not collapse currently
This is the javascript function code
function(event, ui) {
html='';
var show = "Yes";
html += "<h5 id='collapsible'>"+ show +"</h5>";
};
$('#history').html(html);
Here is the html text code to show the Yes on the html page
<div id="history"></div>
Please help me Toggle/Collapse the <div id="history"></div>
Answer 1
If you're already using jQuery, you can simply use toggle()
:
$("#history").toggle();
Answer 2
You can use javascript method for this:
function toggle() {
var target = document.getElementById("history");
if(target.style.display == 'block'){
target.style.display = 'none';
}
else {
target.style.display = 'block';
}
To collapse the HTML by default, set the attribute:
<div id="history" style="display:none;"></div>
Answer 3
jQuery Version:
http://www.codepen.io/anon/pen/xBdkl
<div id="temp" onClick="javascript:func()">Show/Hide</div>
<p/>
<div id="history"></div>
<script>
var html='';
var show = "Yes";
html += "<h5 id='collapsible'>"+ show +"</h5>";
$('#history').html(html);
var func = function(){
if($("#history").is(":visible")){
$('#history').hide();
}else{
$('#history').show();
}
}
</script>
Answer 4
Javascript:
$('#collapseHistory').on('click', function(){
$("#history").toggle();
});
HTML:
<div id="history" style="display: none;"></div>
<div id="collapseHistory">Show/Hide</div>
This should work