Jquery toggle issue

Hikaru12 · June 16, 2015

I have a toggle which starts out with a id element being shown as hidden and when a onclick event occurs it switches back to show. The problem is it creates an additive effect. For example, if I have two toggles like the below when I click on both of them they both show up at the same time. I'd like it when I click on another button the contents of the div (in this case 'add' below) should disappear.

<script>		$(document).ready(function(){		$("#add").hide();		  $("#addanime").click(function(){			$("#add").toggle();		  });		});</script>		<script>		$(document).ready(function(){		$("#all").hide();		  $("#viewall").click(function(){			$("#all").toggle();		  });		});</script></head><body><h1>Button Togglers</h1><button id='addanime'>Button 1</button><br /><button id='viewall'>Button 2</button><div id='add'><p>This is some text</p></div><div id='all'><p>This is also some text</p></div>

thisperson · June 16, 2015

You can optimise your code a lot more:

<script>$(document).ready(function(){   $("#add,#all").hide();   $("#addanime").click(function(){      $("#add").toggle();   });      $("#viewall").click(function(){      $("#all").toggle();   });});</script>

Hikaru12 · June 17, 2015

You can optimise your code a lot more:

<script>$(document).ready(function(){   $("#add,#all").hide();   $("#addanime").click(function(){      $("#add").toggle();   });      $("#viewall").click(function(){      $("#all").toggle();   });});</script>

Thanks, still need a way to hide the other div when the second buttons clicked.

thisperson · June 17, 2015

<script>add = false;all = false;$(document).ready(function(){   $("#add,#all").hide();   $("#addanime").click(function(){      $("#add").toggle();      add = true;      if($all === true) {        $("#all").toggle();        all = false;      } else {              }   });   $("#viewall").click(function(){      $("#all").toggle();      all = true;      if($add === true) {        $("#add").toggle();        add = false;      } else {              }   });});</script>

Hopefully this should solve it for you.

Hikaru12 · June 18, 2015

<script>add = false;all = false;$(document).ready(function(){   $("#add,#all").hide();   $("#addanime").click(function(){      $("#add").toggle();      add = true;      if($all === true) {        $("#all").toggle();        all = false;      } else {              }   });   $("#viewall").click(function(){      $("#all").toggle();      all = true;      if($add === true) {        $("#add").toggle();        add = false;      } else {              }   });});</script>

Hopefully this should solve it for you.

I tried this in a JS fiddle and it didn't work. Not sure why.