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 es from:

while ($dados = mysql_fetch_array($query))

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 es from:

while ($dados = mysql_fetch_array($query))

• php
• javascript
• html
• show-hide

Share Improve this question Follow edited Jan 8, 2013 at 4:52 Cheran Shunmugavel 8,43911 gold badge3535 silver badges4040 bronze badges asked Jan 7, 2013 at 17:37 Henrique SouzaHenrique Souza 1311 gold badge11 silver badge44 bronze badges 5

• Look into using jquery. api.jquery./show and api.jquery./hide – Ryan Beaulieu Commented Jan 7, 2013 at 17:39
• 2 Implementing jQuery solely to hide/show a div is like taking an F18 down to the shops. – MrCode Commented Jan 7, 2013 at 17:41
• w3schools./css/css_display_visibility.asp – ethrbunny Commented Jan 7, 2013 at 17:41
• Where is your hideDiv function? – codingbiz Commented Jan 7, 2013 at 17:42
• I Did'nt do any hideDiv yet @codinbiz – Henrique Souza Commented Jan 7, 2013 at 18:53

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 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.

<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)

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./node/708#xment-3123

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

<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