I am using the following code to expand and collapse.
<script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
</script>
<a href="#" onclick="toggle_visibility('id1');" >Click here to toggle visibility of element #foo</a>
<div id="id1">This is foo</div>
<a href="#" onclick="toggle_visibility('id2');" >Click here to see wonder</a>
<div id="id2">This is foo</div>
I want +(plus) image when collapse and -(minus) image when expand. Please help me with code to do that.
Thanks In advance.
Can you do it using jquery? Please visit this fiddle
Js code:
$(document).ready(function () {
$('#toggle-view li').click(function () {
var text = $(this).children('div.panel');
if (text.is(':hidden')) {
text.slideDown('200');
$(this).children('span').html('-');
} else {
text.slideUp('200');
$(this).children('span').html('+');
}
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.