Javascript – Show/hide div element

To show hidden div element use this code:

<html>
  <head>
     <script type="text/javascript">
         function showDivElement(divID) {
            divElement = document.getElementById(divID);
            if (divElement.style.display == 'none'){
                divElement.style.display = 'block';
             }
             return;
        }
     </script>
     <title>Hello</title>
  </head>
  <body>
    <h3>Start Header</h3>
    <a href="#" onclick="showDivElement('myDiv')">Unhide DIV</a>
    <div id="myDiv" style="display:none" >
        <p>Paragraph #1</p>
        <br/>
        <p>Paragraph #2</p>
    </div>
    <h3>End Header</h3>
  </body>
</html>

The example is taken from here.

If you want to this in JSF, you must put the “JSF form” name in the elementId-generation. This mean that when you call getElementById(), you have to pass “myJSFForm:divID” as argument. In result you put this statement in the JS function:

divElement = document.getElementById(myJSFForm:divID);

For details look at here.

Advertisements

About tsvetanv

Friends, Books, Music, Math, Programming.
This entry was posted in Java. Bookmark the permalink.

One Response to Javascript – Show/hide div element

  1. shadrik says:

    Cool! Thanks :)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s