Jump to content

Jquery toggling panels problem...


SlyOne

Recommended Posts

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.

 

 

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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(){

 

 

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.