Geek asks and answers

How to make the switch hidden by default

Hello, I would like to know how to make toggle hidden when the page loads, I made simple code, but when the page loads, it will be displayed by default. I want it to be around.

I need to try using CSS something like

.hidden {
display:none;
}

when I use this code, the item is not displayed at all.

this is my code

edited

<script type="text/javascript">
 function toggleDiv(divId) {
  $("#"+divId).toggle();

  }
 </script>


<a href="javascript:toggleDiv('myContent');">this is a test</a>
   <div id="myContent">
      <a href="javascript:toggleDiv('myContentt');"><span>this is a text</span></a>
          <div>this is a test #2 </div>
   </div>

          <div id="myContentt">
            test
          </div>

Please, help.

+5
source share
4 answers

I think you want something like this,

Demo (I used onclickin the demo because jsfiddle doesn't like javascript on href)

CSS:

.hidden{
       display:none;
    }

Markup:

<a href="javascript:toggleDiv('myContent');">this is a test</a>
<div id="myContent" class='hidden'>
  <div>this is a test #1 </div>
</div> 
<br />
<a href="javascript:toggleDiv('myContentt');"><span>this is a text</span></a>
<div id="myContentt" class='hidden'>
 this is a test #2
</div>

JavaScript:

function toggleDiv(divId) {
        $("#"+divId).toggle(); 
    }
+9
source

Use .toggleClass('hidden')to show and hide your items.

+2

$("your class").hide();


$(document).ready(function(){
    $(".subResult").hide();
});

then you can define your function
 function toggle(){
$(".subResult").slideToggle(2000);
     }


$(document).ready(function(){

$("p").hide();

  $("button").click(function(){

    $("p").toggle();

  });

});

///////

$("p").hide(); .

+2
source

The key value to understand with toggle () is that it simply toggles the CSS display attribute. Therefore, if you want to replace one element with another, just make sure that the element you want, originally hidden, has a style display: none;. When you use the toggle () method, it will make the visible element hidden from display: none;and remove this attribute from the hidden element.

+1
source

More articles:


All Articles