html - jquery hide and show link not working -


its not showing title (show legend) able switch between legend , map. work jquery 1.8.3 version after doesn't work. can on this?

<html><head>   <meta http-equiv="content-type" content="text/html; charset=utf-8">   <title> - jsfiddle demo</title>    <script type="text/javascript" src="//code.jquery.com/jquery-2.1.3.js"></script>     <style type="text/css">     .maplegend {     display:none; }   </style>    <script type="text/javascript">//<![cdata[  $(window).load(function(){ $(document).ready(function () {      $(".legend").hide();     $(".maplegend").show();      $('.maplegend').toggle(function () {         $("#plus").text("show legend");         $(".legend").show();         $(".map").hide();      }, function () {         $("#plus").text("show map");         $(".legend").hide();         $(".map").show();     });  }); });//]]>    </script>   </head> <body>   <a href="#" class="maplegend" id="plus" style="display: none;">show legend</a>  <div class="legend" style="display: none;">legend</div> <div class="map">map</div>    </body></html> 

you not using toggle properly. not event, it's instruction toggles visibility on/off. you're looking like:

$(document).ready(function () {     var islegendvisible = false;     $(".legend").hide();     $(".maplegend").show();      $('.maplegend').on('click', function () {         if(islegendvisible) {             $("#plus").text("show map");             $(".legend").hide();             $(".map").show();         }         else {             $("#plus").text("show legend");             $(".legend").show();             $(".map").hide();         }         islegendvisible = ! islegendvisible;     }); }); 

ps: here's link toggle documentation, if still want use it.


Comments

Popular posts from this blog

Email notification in google apps script -

c++ - Difference between pre and post decrement in recursive function argument -

javascript - IE11 incompatibility with jQuery's 'readonly'? -