luizcruz Posted April 10, 2014 Report Share Posted April 10, 2014 Hi! I'm testing a JQuery script to hide/show divs and it's working successfuly, and I consider this approch very nice to hide/show fields, because it does not cause any problem with alignment of the fields! This solution as is requires we click in the respective weblink to show and hide the fields! But I need to make a little change, I would like to trigger this function when the corresponding checkbox is checked, e.g. when the checkbox "x" is checked show div "x", and when it is unchecked hide div "x"! The triggers to call this function would be the following: 1) "Ir para o Trabalho" checkbox instead "Show/hide_1" weblink! 2) "Ir para o Colégio/ Faculdade/ Pós Graduação" checkbox instead "Show/hide_2" weblink! Please, could someone help me set these triggers? My url page is: http://sa1.caspio.com/dp.asp?AppKey=58733000aac8a3fdae8b45deb24a The script I'm using is the following: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $(".slidingDiv1").hide(); $(".show_hide1").show(); $('.show_hide1').click(function(){ $(".slidingDiv1").slideToggle(); }); }); </script> <script type="text/javascript"> $(document).ready(function(){ $(".slidingDiv2").hide(); $(".show_hide2").show(); $('.show_hide2').click(function(){ $(".slidingDiv2").slideToggle(); }); }); </script> Best! Luiz Quote Link to comment Share on other sites More sharing options...
luizcruz Posted April 11, 2014 Author Report Share Posted April 11, 2014 Hi! Fortunately I managed to solve the issue! The mistake I was making was trying to use "class" instead of "id". Now I understood that in this case, the reference to the HTML field is taken through the id property. 1) wrong way ==>> $('.InsertRecordField_name').click(function(){ 2) Correct way ==>> $("#InsertRecordField_name").click(function(){ Ps: InsertRecord to submission forms and EditRecords to Update forms! Regards! Luiz Quote Link to comment Share on other sites More sharing options...
luizcruz Posted April 13, 2014 Author Report Share Posted April 13, 2014 Hi! I would like to say the jQuery solution to hide/show div I mentioned in this post, was provided by "Ashley Ford" and you can find the detailed tutorial in the following url! Simple jQuery Show/Hide Div http://papermashup.com/simple-jquery-showhide-div/ Best Regards! Luiz Quote Link to comment Share on other sites More sharing options...
nmalawskey Posted December 29, 2015 Report Share Posted December 29, 2015 I've been using something similar on a form. The only issue is that when you click the show/hide button, it reloads the form to the top of the page, causing users to have to scroll back down to display the div. Anyone know a way around this? Quote Link to comment Share on other sites More sharing options...
nmalawskey Posted December 29, 2015 Report Share Posted December 29, 2015 Never mind. Instead of showing/hiding the div, I used jquery to show/hide the text. Solved the issue. If anyone ever needs it: <script> $(document).ready(function(){ $('.moreinfo').hide(); $('.more').click(function (ev) { var t = ev.target $('#info' + $(this).attr('target')).toggle(500, function(){ $(t).html($(this).is(':visible')? 'I\'m done reading more' : 'Read more') }); return false; }); }); </script> <p class="moreinfo" id="info1">text text text text </p> <a class="more" target="1">Read More</a> Xiang 1 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.