Show / Hide div with jscript

Question

I looked all arround the site and i could not find an answer that is what i want. Perhaps my knowledge is just too little for this but im trying to learn more and more.

Here is the thing, i have this website with several movies and after making a search in my db i return only the essential data for the user with the movies that correspond to the search parameter, the rest of the data i want to put in a div with the option to SHOW and HIDE the same div.

That is what i have so far:

<script type='text/javascript'>
function showDiv() {
   document.getElementById('hiddenDiv').style.display = "block";
}
</script>

<div id="hiddenDiv"  style="display:none;" class="answer_list" > WELCOME</div>
<input type="button" name="answer" value="Show Div" onclick="showDiv()" />

Detail: Im printing everything with php echo.

Thank you very much!

Additional info:

All the result are shown in the same page, wich means all the divs have the same name.

I have change my div code to:

echo "<div id='$dados[id]'  style='display:none;' class='answer_list' >";

$dados[id] returns me the id of the data in my db.

I want to change:

document.getElementById('hiddenDiv') to something like document.getElementById('$dados[id') <-- Shows only the last div.

Can it be done?

Result comes from:

while ($dados = mysql_fetch_array($query))

Answer 1

Try this:

<script type='text/javascript'>
    function showDiv() {
        if (document.getElementById('hiddenDiv').style.display == 'block') {
            document.getElementById('hiddenDiv').style.display = 'none';
        } else {
            document.getElementById('hiddenDiv').style.display = 'block';
        }
    }
</script>
<div id="hiddenDiv"  style="display:none;" class="answer_list" >
    WELCOME
</div>
<input type="button" name="answer" value="Show Div" onclick="showDiv()" />

One function does all. That being said, jQuery toggle is really nice.

Answer 2

<script type='text/javascript'>
function showDiv() {
   document.getElementById('hiddenDiv').style.display = "block";
   document.getElementById('showDivButton').style.display = "none";
}
function hideDiv() {
   document.getElementById('hiddenDiv').style.display = "none";
   document.getElementById('showDivButton').style.display = "block";
}
</script>

<div id="hiddenDiv"  style="display:none;" class="answer_list" >
  WELCOME
  <input type="button" id="hideDivButton" value="Hide Div" onclick="hideDiv()" />
</div>
<input type="button" id="showDivButton" value="Show Div" onclick="showDiv()" />

or use a framework, such as Dojo (or even jQuery, if it absolutely can't be helped)

Answer 3

Sample Javascript + Html:

<script language="javascript"> 
function toggle() {
    var ele = document.getElementById("toggleText");
    var text = document.getElementById("displayText");
    if(ele.style.display == "block") {
        ele.style.display = "none";
        text.innerHTML = "show";
    } else {
        ele.style.display = "block";
        text.innerHTML = "hide";
    }
} 
</script>

<a id="displayText" href="javascript:toggle();">show</a> <== click Here
<div id="toggleText" style="display: none"><h1>peek-a-boo</h1></div>

Note: the term 'toggle' represents show / hide an element.

Also Here are some other good examples:

http://csscreator.com/node/708#xcomment-3123

http://psoug.org/snippet/Javascript-Smooth-Div-ShowHide_236.htm

Answer 4

<script type='text/javascript'>
function showadve() {
    if (document.getElementById('hiddenadve').style.display == 'none') {
        document.getElementById('hiddenadve').style.display = 'block';
    } else {
        document.getElementById('hiddenadve').style.display = 'none';
    }
}
</script>
<div id="hiddenadve" class="answer_list" >
    WELCOME
</div>
<input type="button" name="answer" value="Show Div" onclick="showadve()" />
<a href="#" onclick="showadve()">all close</a>`

it's mine