Toggle Drop Down List Stays Open

Question

I have a problem with the toggle down menu or list in my case.

The problem is that the menu is always open (the #text_box) when I load the page.

It should be closed so when the user clicks on the 'Open Me' button then will open.

I have put the codes on JSFiddle and here it does not work at all, it does not open or close. I have copied all the necessary code parts: html, css, javascript.

The main problem is in the starting state when I open the page in a browser the menu/list is always open.

Also I'm making it to be responsive for desktop, tablets and mobiles. Can you help me fix the problem? Thanks

HTML:

<button  onclick="toggle_visibility('text_box');">Open Me</button>
<div id="text_box"> 
<ul >
        <li>Test_1</li>
        <li>Test_2</li>
        <li>Test_3</li>
        <li>Test_4</li>
        <li>Test_5</li>

</ul>        

</div>

JavaScript:

function toggle_visibility(id) {

   var e = document.getElementById(id);
   if(e.style.display == 'block')
      e.style.display = 'none';
   else
      e.style.display = 'block';
}

CSS:

 button {
 padding: 10px 15px;
 background: #4479BA;
 color: #FFF;
 text-decoration: none;
 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 border-radius: 4px;
 border: solid 1px #20538D;
 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
 -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px    rgba(0, 0, 0, 0.2);
 -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
 -webkit-transition-duration: 0.2s;
 -moz-transition-duration: 0.2s;
 transition-duration: 0.2s;
 -webkit-user-select:none;
 -moz-user-select:none;
 -ms-user-select:none;
 user-select:none;
 }

 button:hover {
 background: #356094;
 border: solid 1px #2A4E77;
 text-decoration: none;
 }

 button:active {
-webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
-moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
 box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
 background: #2E5481;
 border: solid 1px #203E5F;

 }


 #text_box {
 width: 200px;
 margin-top: 0px; 
 padding: 2px 0px;
 background:rgba(102,102,102,1);
 color: #fff;

 }

Answer 1

update your style of #text_box to following

#text_box {
    width: 200px;
    margin-top: 0px; 
    padding: 2px 0px;
    background:rgba(102,102,102,1);
    color: #fff;
    display:none;
}

I have just added display:none in it.

Answer 2

Multiple ways to do so better way prioritized below:

CSS

 #foo { display:none;}

JSFiddle : CSS

JavaScript

document.getElementById("foo").style.display ="none"; /* JavaScript Solution*/

JSFiddle : JS

OR

JQuery

$("#foo").hide();

Note: If you are using JQuery solution do not forget to add JQuery Library

JSFiddle : JQuery

Solution:

document.getElementById("foo").style.display ="none";
function toggle_visibility(id) {
		
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }

 button {
    padding: 10px 15px;
    background: #4479BA;
    color: #FFF;
	text-decoration: none;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: solid 1px #20538D;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    -webkit-transition-duration: 0.2s;
    -moz-transition-duration: 0.2s;
    transition-duration: 0.2s;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
}
button:hover {
    background: #356094;
    border: solid 1px #2A4E77;
    text-decoration: none;
}
button:active {
    -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
    -moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
    background: #2E5481;
    border: solid 1px #203E5F;
	
}


#foo {
	width: 200px;
	margin-top: 0px; 
	padding: 2px 0px;
    background:rgba(102,102,102,1);
    color: #fff;
	
  }

<button  onclick="toggle_visibility('foo');">Open Me</button>
<div id="foo"> 
    <ul >
        	<li>Test_1</li>
            <li>Test_2</li>
            <li>Test_3</li>
            <li>Test_4</li>
            <li>Test_5</li>
           
    </ul>        

</div>

Answer 3

I suggest you start learning JQuery. It makes these things so much easier, and is fast becoming the standard way of doing things. It might seem like hocus pocus if you are just getting started with JavaScript. But it will save you a lot of time and headaches when doing the simple stuff. Not to mention keystrokes.

https://jsfiddle.net/abalter/1r29v8tj/9/

HTML

<button id="dropper">Open Me</button>
<div id="foo">
    <ul id="dropdown">
        <li>Test_1</li>
        <li>Test_2</li>
        <li>Test_3</li>
        <li>Test_4</li>
        <li>Test_5</li>
    </ul>
</div>

JS

$('#dropper').on('click', function(){
    $('#dropdown').toggle();
});

CSS

#dropdown {
    margin: 2px 0px;
    padding: 2px 0px;
    display: none;
}

For what it's worth, I would just toggle the ul, but it depends on what you are trying to do.

Also, look into the bootstrap library, which has a lot of slick dropdown classes that are very versatile and mobile-friendly.

Answer 4

Just start your div with display: none in the CSS.

Like this :

function toggle_visibility(id) {
    var e = document.getElementById(id);
    e.style.display = (e.style.display == 'block') ? 'none' : 'block';
}

 button {
     padding: 10px 15px;
     background: #4479BA;
     color: #FFF;
     text-decoration: none;
     -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
     border-radius: 4px;
     border: solid 1px #20538D;
     text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
     -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
     -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
     box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
     -webkit-transition-duration: 0.2s;
     -moz-transition-duration: 0.2s;
     transition-duration: 0.2s;
     -webkit-user-select:none;
     -moz-user-select:none;
     -ms-user-select:none;
     user-select:none;
 }
 button:hover {
     background: #356094;
     border: solid 1px #2A4E77;
     text-decoration: none;
 }
 button:active {
     -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
     -moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
     box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
     background: #2E5481;
     border: solid 1px #203E5F;
 }
 #text_box {
     width: 200px;
     margin-top: 0px;
     padding: 2px 0px;
     background:rgba(102, 102, 102, 1);
     color: #fff;
     display: none;
 }

<button onclick="toggle_visibility('text_box');">Open Me</button>
<div id="text_box">
    <ul>
        <li>Test_1</li>
        <li>Test_2</li>
        <li>Test_3</li>
        <li>Test_4</li>
        <li>Test_5</li>
    </ul>
</div>

Answer 5

You can try to start off with setting the div to display:none.

This way it will always start off as none.

You could also explore jQuery as an option.

<input id="myButton" type="button" name="answer" />

$('#myButton').click(function() {
  $('#myDiv').toggle('slow', function() {
    // Animation complete.
  });
});