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.