hide and unhide a div

Question

I am designing a web page in which I got struck at some point.

I am using 3 upload buttons in a div, let the id of the div be "uploadDiv" I have a right arrow and down arrow images

• if I click on the down arrow image, the content of the "uploadDiv" should be displayed
• if I click on the right arrow image, the content of the "uploadDiv" should be hidden

The images should be in the same place.

What is the solution?

Answer 1

It sounds like you are talking about a collapsible panel of some form. Depending on what the underlying architecture is of your source code is, Microsoft's Ajax Control Toolkit has a pretty good collapsible panel option.

Another great option out there is to look at jQuery and the jQuery UI components.

2. http://jqueryui.com/demos/accordion/
3. http://jqueryui.com/demos/accordion/#collapsible

SAMPLE

<script type="text/javascript">
    $(function() {
        $("#accordion").accordion({
            collapsible: true
        });
    });
</script>
<div id="accordion">
    <h3><a href="#">File Upload</a></h3>
    <div>
       CONTENT HERE
    </div>
</div>

Answer 2

The question is vague, but whatever your actual goal you'll achieve the effect by toggling a class on your target divs and letting your CSS implement the effect. This is far superior to changing style directly with JS because it separates the concern of styling to the styling layer, and with an umbrella class this let's you cheaply modify the effect with additional properties at a single point.

Now the CSS that you actually want could be visibility: hidden (if you want the layout flow to be preserved) or display: none (if you want the layout to collapse) or even something exotic like changing the opacity or colours if you want to achieve a greying out effect.

Finally enabling this in JS can be done easily by appending or replacing the content of element.className property but realistically a much improved effect can be had by leveraging a library like jquery or mootools which will offer you most of this work already wrapped into widgets and such niceties as animated fading etc..

Don't fall into the maintenance trap of creating the effect with JS and don't fall into the trap of reinventing the wheel where amazing silver rimmed varieties exist already for free.

Answer 3

<script language=javascript type='text/javascript'>
function hidediv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('uploadDiv').style.visibility = 'hidden';
}
else {
if (document.uploadDiv) { // Netscape 4
document.hideshow.visibility = 'hidden';
}
else { // IE 4
document.all.uploadDiv.style.visibility = 'hidden';
}
}
}

function showdiv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('uploadDiv').style.visibility = 'visible';
}
else {
if (document.layers) { // Netscape 4
document.uploadDiv.visibility = 'visible';
}
else { // IE 4
document.all.uploadDiv.style.visibility = 'visible';
}
}
}
</script> 

Above script toggles the style.visibility property of the div. which can be "visible" or "hidden"

<img src="right.png" onclick="hidediv()" />
<img src="down.png" onclick="showdiv()" />

Use the onclick events to call the needed hide or show div

Taken from http://www.webmasterworld.com/forum91/441.htm

Answer 4

By using JQuery you can made it in a easy way. you can Download Here jquery.js file.

js:

<script src="js/jquery.js"></script>
<script>
   $j(document).ready(function(){

      $("#hide").click(function(){
           $("#uploadDiv").hide();    //hide the div 
      });

      $("#show").click(function(){
       $("#uploadDiv").show();    //show the div
      });

      $("#toggle").click(function(){
       $("#uploadDiv").toggle();  //toggle the div 
      });
   });
</script>

html:

<div id="uploadDiv">Some text here !</div>
<div id="hide">Hide</div>         
<div id="show">Show</div>
<div id="toggle">toggle</div>

click on particular div to perform desired operation.

Answer 5

Add a class to your css file,

.hidden { display: hidden; }

Add a onclick event to your buttons

The button to hide
... onclick="document.getElementById('UploadDiv').className = '.hidden'" ....

The button to show
... onclick="document.getElementById('UploadDiv').className = '.default'" ....

Answer 6

to hide and show your div using jquery you could do something like:

 <head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $("#downArr").click(function () {
      $("#uploadDiv").toggle();
      $("#downArr").toggle();
          $("#upArr").toggle();
    });

        $("#upArr").click(function () {
      $("#uploadDiv").toggle();
      $("#downArr").toggle();
          $("#upArr").toggle();
    });

  });
  </script>

</head>
<body>
        <img id="downArr" src="downArr.jpg">
        <img id="upArr" src="upArr.jpg" style="display:none;">

        <br>

    <div id="uploadDiv" style="display:none;">
        content
    </div>
</body>

Clicking the image downArr.jpg will make upArr.jpg and the content of uploadDiv visible

Check out more examples of the toggle function at http://docs.jquery.com/Effects/toggle

-Fortes

Answer 7

最简单的方法之一是使用jquery 。