Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1051
  • Last Modified:

javascript + show/hide section

I want to beable to show/hide a section so when the person clicks how the section is displayed and the the word hide is displayed, also perferably be able to be use cross browsers

thanks
0
dkilby
Asked:
dkilby
1 Solution
 
BogoJokerCommented:
Hi dkilby,

Just have javascript alter the display of a section from "none" to "block" or "inline"

Joe P
0
 
0h4crying0utloudCommented:
somn like this?

function toggle() {

  if (document.getElementById("content").style.display == "none") {
      document.getElementById("content").style.display = "block";
      document.getElementById("handle").innerHTML = "Hide";
      }
      else {

            document.getElementById("content").style.display = "none";
      document.getElementById("handle").innerHTML = "Show";
      }
      
}
</script>

<body>
<div id="handle" onclick="toggle()">Show</div>
<div id="content"> stuff </div>
</body>
0
 
BogoJokerCommented:
Here is a real quick example, gotta go for now be back later.

<html>
<head>
<script type="text/javascript">
var hidden = true;
</script>
</head>

<body>
<div id="hide" style="display: none">
<p>Here is the hidden division!</p>
</div>
<input type="button" value="Show/Hide" onClick="if (hidden) { document.getElementById('hide').style.display = 'block'; hidden = false; } else { document.getElementById('hide').style.display = 'none'; hidden = true; }">
</body>

</html>



Joe P
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
archrajanCommented:
0
 
dkilbyAuthor Commented:
0h4crying0utloud, i am trying you code, and i want to hide some table row <tr> so i put the first <div> for the content before the first row and the closing </div> after the last row, but it doesn't hide the rows, it switches the Show to Hide and back.
0
 
0h4crying0utloudCommented:

Instead of using a div to wrap the rows, can you use the tbody tags like so? this is also cross-browser compatible


<tr><th>head</th></tr>
<tbody id="content">
<tr><td>head</td></tr>
<tr><td>head</td></tr>
<tr><td>head</td></tr>
</tbody>
<tr><td>foot</td></tr>
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now