ansaurus

Question

hide a div

Answer 1

A:

One of the easiest method to do would be using jquery.

xandy 2009-07-10 05:58:41

This is another problem, not a solution. Use jquery how? Just magically? Kneejerk cheap answer without detail.

annakata 2009-07-10 06:01:37

Yet almost any question you ask about javascript will be answered like this.

Ian Elliott 2009-07-10 06:03:13

I know and I can't bear it. You may as well write "use programming!"

annakata 2009-07-10 06:11:32

OK. I should clarify some more. Correct me if I am wrong. I think directing to the right technology first would be sometimes more important. Apparently if anyone who took 1 hour or so to read what is JQuery would agree that hiding something is too easy to do in jq and that is what jq intended to do. SO is a place for exchanging ideas and help user learn, but not work for them. Solving with an ad-hoc solution would not really help the one who ask the question.

xandy 2009-07-10 07:28:39

It's not personal, but to further clarify: Your logic still falls down when you could have linked to the accordion example as RSolberg did. The problem is that your answer increases complexity rather than reduces it - there's no useful information there. Further, whilst I agree that simply posting code samples without explanation isn't desirable, this is just the opposite extreme..

annakata 2009-07-10 08:07:18

Answer 2

+1 A:

<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

Pradeep 2009-07-10 06:00:40

You should correct the 8th line to document.uploadDiv.visibility = 'hidden';

a programmer 2009-07-10 06:29:12

Answer 3

A:

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'" ....

Ian Elliott 2009-07-10 06:01:52

bump because I believe this is closer to the truth (but adding a classname for .default is bad)

annakata 2009-07-10 06:12:50

@annakata - "closer to the truth"?

RSolberg 2009-07-10 06:17:04

i.e. manipulates class rather than style. Badly phrased I admit :)

annakata 2009-07-10 08:00:23

@annakata - I figured that is what you were getting at after reading your post, but I laughed on the truth part for minutes last night :)

RSolberg 2009-07-10 15:02:37

Answer 4

+3 A:

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.

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>

RSolberg 2009-07-10 06:03:05

also close to the truth :)

annakata 2009-07-10 08:01:03

Answer 5

+1 A:

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.

annakata 2009-07-10 06:10:54

Answer 6

A:

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

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

  <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

Fortes 2009-07-10 06:17:40

Answer 7

+1 A:

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.

Srikanth 2009-07-10 06:26:12

ansaurus

tags:

views:

answers:

hide a div

related questions