How to expand / collapse paragraph

Question

I am trying to make a paragraph hidden unless someone actually clicks a button to show it.

Here's my Javascript:

<script type="text/javascript">
function toggleMe(a){
var e=document.getElementById(a);
if(!e)return true;
if(e.style.display=="none"){
e.style.display="block"
}
else{
e.style.display="none"
}
return true;
}
</script>

Here's my HTML code:

<input type="button" onclick="return toggleMe('special1')" value="(click here for more information)"><br>
<p id="special1">
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</p>

The button actually works perfectly. But the problem is that by default the text is shown and you click the button to collapse it. What do I need to change to make it be collapsed by default?

Answer 1

The simple solution :

Change

<p id="special1">

to

<p id="special1" style="display:none">

Another one if you have a CSS file :

Add this to your CSS :

#special1 { display: none; }

An alternative would be to define in CSS classes for the visible and hidden states, set the class in HTML and switch classes in your JS code.

Answer 2

See fiddle: http://jsfiddle.net/FCJ4c/

First, hide the object in question with css...

#special1{ display: none }

Second, set up an event listener when the button is clicked, to toggle the target object...

$(document).ready(function(){
    $("#button-1").click(function(){
          $("#special1").toggle()
    })
})

Answer 3

Use the Display:none in css for hiding it. and again Display:block to make it visible when needed.

Answer 4

Here is the fiddle: http://jsfiddle.net/rony36/K5syB/

<input type="button" id="button-1" value="(click here for more information)"><br>

<p id="special1">
blah blah blah blah blah blah blah blah blah blah 
blah blah blah blah blah blah blah blah
</p>

script:

  $(document).ready(function(){
      var count = 0;
      $("#special1").hide();

      $("#button-1").click(function(){
          count++;
          if(count % 2 != 0){
            $("#special1").show();
          }else{
              $("#special1").hide();
          }
      })
  })

Answer 5

Use this javaScript for Completely hiding

parent.document.getElementById('id').style.display='none';

More attributes on here