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
Post a Comment