SlyOne Posted February 18, 2009 Share Posted February 18, 2009 Hi, Found a tutorial using google to toggle panels of hidden content up and down by clicking on a header. However the code that i found makes it so that the content is already visible and you click the header to hide it. Was wondering if anyone could take a look at the following code and see if there is anyway for me to use it so that when a user clicks on a radio button, content would then slide out from underneath the radio button. in the tutorial they only use simple headers and not radio buttons... <div class="slidePanel"> <div class="slideHeader">Click Me</div> <div class="slideBody"> Lorem ipsum. </div> </div> then some css for styling these panels (which only in part i may use, not sure yet) .slideHeader { height: 20px; background: Blue; color: White; } .slideBody { background: Gray; padding: 5px; } .slidePanel { width: 100px; float: left; margin: 5px; } and now here is the jquery code $(document).ready(function(){ //Fixes an animation glitch caused by the //div's dynamic height. Need to set the //height style so the slide functions work //correctly. $("div.slideBody").each(function(){ $(this).css("height", $(this).height() + "px"); }); //hook the mouseup events to each header $("div.slidePanel").children( "div.slideHeader").mouseup(function(){ //find the body whose header was clicked var body = $(this).parent().children("div.slideBody"); //slide the panel if(body.is(":hidden")) body.slideDown(); else body.slideUp(); }); }); thanks for any help, if what i've asked for is confusing let me know...i'm very tired at the moment so may not make any sense. Quote Link to comment Share on other sites More sharing options...
KevinM1 Posted February 18, 2009 Share Posted February 18, 2009 I don't see why there'd be much of a difference between using a div as a toggle switch and using a radio button. The process is essentially the same: Click the toggle (div/radio button) Check to see which toggle was clicked Display/hide proper div. Have you tried simply substituting a radio input for the header div while keeping the id the same? Quote Link to comment Share on other sites More sharing options...
SlyOne Posted February 19, 2009 Author Share Posted February 19, 2009 cheers will have a go...but still need to know how I can start it with the hidden content actually hidden instead of it being visible and requiring the radio button to be checked for the function to work. As at it stands, the content is already shown to the user. Quote Link to comment Share on other sites More sharing options...
SlyOne Posted February 20, 2009 Author Share Posted February 20, 2009 ok, seems a little or quite a bit confused So i've just taken a sample radio button out of my actual site document and whacked it into a completely separate html page for testing of this code. Below is the html, how can I apply the previously supplied jquery and css code to this radio button? <body> <div class ="slidePanel"> <p><label>Would you like a course of study involving works of art or antiques?</label> <p><label>Yes: </label><radio class="slideHeader"><input name="artistGroup" type="radio" class="radio" id="artistGroup" value="02Yes" /></radio><label>No: </label><input name="artistGroup" type="radio" class="radio" id="artistGroup" value="12No" /> <div class="slideBody"> Lorem ipsum </div> </p> </div> </body> In the jquery code above, do i change it from this: $("div.slidePanel").children( "div.slideHeader").mouseup(function(){ to this? $("div.slidePanel").children( "radio.slideHeader").mouseup(function(){ and what would i do with the css? Think i am confused :S Quote Link to comment Share on other sites More sharing options...
SlyOne Posted February 20, 2009 Author Share Posted February 20, 2009 people might start thinking i'm talking to myself here anyway, think i've got the appropriate code now on the .js file but still very unsure with the how to initiate it on the html page (the radio button part i mean) anyway, below is the snippet i've been talking about and have recently changed...does that look kind of right? //hook the mouseup events to each header $("div.slidePanel").children( "input[@type=radio].slideHeader").mouseup(function(){ 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.