Javascript – Show/hide div element

To show hidden div element use this code:

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

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.


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: Logo

You are commenting using your 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