Home/ Questions/Q 8500047
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T00:50:02+00:00

I am trying to expand/collapse list items. Text will be word followed by definition

  • 0

I am trying to expand/collapse list items. Text will be word followed by definition sort of where definition appears/disappears on click on word. This is my code so far : 

<html>
<script type="text/javascript">

function toggleVisibility(listItem) {
var listItemDiv = document.getElementById(listItem);

if(listItemDiv.style.visibility == 'hidden') {
        listItemDiv.style.visibility = 'visible';
    } else {
        listItemDiv.style.visibility = 'hidden';
    }


}

</script>

<div onclick="toggleVisibility('p1')">p1</div><div id=p1>p1's text</div></br>
p2<div id=p2>p2's text</div></br>
p3<div id=p3>p3's text</div></br>
p4<div id=p4>p4's text</div></br>
p5<div id=p5>p5's text</div></br>

</html>

However this code hides my text isntead of collapse/expand. I wish to achieve this through javascript preferably.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    SOLUTIONS:

    function toggleVisibility(listItem) {
var listItemDiv = document.getElementById(listItem);

if(listItemDiv.style.display == 'none') {
        listItemDiv.style.display = 'block';
    } else {
        listItemDiv.style.display = 'none';
    }   
}

    OR 

    <html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript">

$(window).load(function(){
    $('dt').click(function(){
                var dl = $(this).parent();
                $('dd',dl).slideToggle();
    });
});          
</script>

<dl>
    <dt>
        item1
    </dt>
    <dd>
        item1.description
    <dd>
</dl>

</html>
    • 0