lovephp Posted October 12, 2012 Share Posted October 12, 2012 friends how to add i hide option on the same button? and also whichever buton clicked it shows keep showing its content even after the page is refreshed? <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ $(".buttons").click(function () { var divname= this.value; $("#"+divname).show("slow").siblings().hide("slow"); }); }); </script> </head> <body> <div id="buttonsDiv"> <input type="button" id="button1" class="buttons" value="div1"></input> <input type="button" id="button2" class="buttons" value="div2"></input> <input type="button" id="button3" class="buttons" value="div3"></input> <input type="button" id="button4" class="buttons" value="div4"></input> </div> <div> <div id="div1" style="display:none"> Hello World </div> <div id="div2" style="display:none"> Test </div> <div id="div3" style="display:none"> Another Test </div> <div id="div4" style="display:none"> Final Test </div> </div> </body> </html> Link to comment https://forums.phpfreaks.com/topic/269403-jquery-toggle-divs-hide-option-and-keep-it-selected/ Share on other sites More sharing options...
jazzman1 Posted October 13, 2012 Share Posted October 13, 2012 I've got a correct result. index.php <html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.js"></script> <script language="Javascript" type="text/javascript"> <!-- function swapContent(cv) { //$("#myDiv").html('<img src="loader.gif"/>').show(); var url = "test.php"; $.post(url, {contentVar: cv} ,function(data) { console.log(data); //$("#myDiv").html(data).show(); }); } //--> </script> <style type="text/css"> #myDiv{ width:200px; height:150px; padding:12px; border:#666 1px solid; background-color:#FAEEC5; font-size:18px; } </style> </head> <body> <a href="#" onclick="return false" onmousedown="javascript:swapContent('con1');">Content1</a> <a href="#" onclick="return false" onmousedown="javascript:swapContent('con2');">Content2</a> <a href="#" onclick="return false" onmousedown="javascript:swapContent('con3');">Content3</a> <div id="myDiv">My default content for this page element when the page initially loads</div> </body> </html> test.php <?php if (isset($_POST['contentVar'])) if($_POST['contentVar'] == 'con1') echo 'Con1 is here'; elseif($_POST['contentVar'] == 'con2') echo 'Con2 is here'; elseif($_POST['contentVar'] == 'con3') echo 'Con3 is here'; else echo 'Something else'; ?> Link to comment https://forums.phpfreaks.com/topic/269403-jquery-toggle-divs-hide-option-and-keep-it-selected/#findComment-1384910 Share on other sites More sharing options...
Christian F. Posted October 13, 2012 Share Posted October 13, 2012 Bad code, bad! ( ) onclick="return false" onmousedown="javascript:swapContent('con1');" "Javascript:" should not be used in the intrinsic event handlers, in fact it should never be used at all. The line(s) in question should have looked like this: <a href="?contentVar=con1" onclick="return swapContent('con1');">Content 1</a> Then have the swapContent () function return false on success. Plus changing the PHP and AJAX call to use GET, and not POST. Doing it this way means the page will work, even if the user doesn't have JS (enabled, or at all). Link to comment https://forums.phpfreaks.com/topic/269403-jquery-toggle-divs-hide-option-and-keep-it-selected/#findComment-1384953 Share on other sites More sharing options...
jazzman1 Posted October 13, 2012 Share Posted October 13, 2012 Bad code, bad! ( ) onclick="return false" onmousedown="javascript:swapContent('con1');" Christian, it's not my code. I posted it into a wrong section! This answer belongs to here -> http://forums.phpfre...lease-help-fix/ @lovephp I thought you 're double posting, ignore my answer for that, please. Thank you j. Link to comment https://forums.phpfreaks.com/topic/269403-jquery-toggle-divs-hide-option-and-keep-it-selected/#findComment-1384960 Share on other sites More sharing options...
lovephp Posted October 13, 2012 Author Share Posted October 13, 2012 I've got a correct result. index.php <html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.js"></script> <script language="Javascript" type="text/javascript"> <!-- function swapContent(cv) { //$("#myDiv").html('<img src="loader.gif"/>').show(); var url = "test.php"; $.post(url, {contentVar: cv} ,function(data) { console.log(data); //$("#myDiv").html(data).show(); }); } //--> </script> <style type="text/css"> #myDiv{ width:200px; height:150px; padding:12px; border:#666 1px solid; background-color:#FAEEC5; font-size:18px; } </style> </head> <body> <a href="#" onclick="return false" onmousedown="javascript:swapContent('con1');">Content1</a> <a href="#" onclick="return false" onmousedown="javascript:swapContent('con2');">Content2</a> <a href="#" onclick="return false" onmousedown="javascript:swapContent('con3');">Content3</a> <div id="myDiv">My default content for this page element when the page initially loads</div> </body> </html> test.php <?php if (isset($_POST['contentVar'])) if($_POST['contentVar'] == 'con1') echo 'Con1 is here'; elseif($_POST['contentVar'] == 'con2') echo 'Con2 is here'; elseif($_POST['contentVar'] == 'con3') echo 'Con3 is here'; else echo 'Something else'; ?> don't seem to be working mate and my code above is different this is another topic not double post Link to comment https://forums.phpfreaks.com/topic/269403-jquery-toggle-divs-hide-option-and-keep-it-selected/#findComment-1384972 Share on other sites More sharing options...
jazzman1 Posted October 13, 2012 Share Posted October 13, 2012 Sorry about that The code above works just fine, but to this topic -> http://forums.phpfreaks.com/topic/269366-switch-content-not-working-please-help-fix/ About the real one you could use "this" javascript object and css property to hide this button. Try, <script> $(document).ready(function(){ $(".buttons").click(function () { $(this).css("display", "none"); var divname= this.value; $("#"+divname).show("slow").siblings().hide("slow"); }); }); </script> Link to comment https://forums.phpfreaks.com/topic/269403-jquery-toggle-divs-hide-option-and-keep-it-selected/#findComment-1384999 Share on other sites More sharing options...
lovephp Posted October 13, 2012 Author Share Posted October 13, 2012 Sorry about that The code above works just fine, but to this topic -> http://forums.phpfre...lease-help-fix/ About the real one you could use "this" javascript object and css property to hide this button. Try, <script> $(document).ready(function(){ $(".buttons").click(function () { $(this).css("display", "none"); var divname= this.value; $("#"+divname).show("slow").siblings().hide("slow"); }); }); </script> no no i do not want to hide buttons i wanted to hide the content if click again on the button Link to comment https://forums.phpfreaks.com/topic/269403-jquery-toggle-divs-hide-option-and-keep-it-selected/#findComment-1385003 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.