?
Solved

jquery sliding div

Posted on 2011-09-07
13
Medium Priority
?
677 Views
Last Modified: 2012-05-12
Hello,

I have a jquery div expander that works pretty well. I click the top "online order" area, and the div expands. http://jsfiddle.net/tMRtK/

I have put a piece of text called more options at the bottom which I would like to make the div expand more, to reveal those options I have. I just put them in a style="display:none" div for right now.

Is there anyway to expand this function so that when 'more options' is clicked, the div expands even more, then closes up that extra bit when 'more options' is clicked again?

Thank you very much!
0
Comment
Question by:hibbsusan
  • 5
  • 5
  • 3
13 Comments
 
LVL 83

Expert Comment

by:leakim971
ID: 36499070
What about :
    $(".more_options_trigger").click(function() {
        $("div div", this).slideToggle();
    })

Open in new window


Test page : http://jsfiddle.net/tMRtK/2/
0
 
LVL 3

Accepted Solution

by:
evedder earned 1000 total points
ID: 36499085
like this.

I take your original code from your link
---HTML----
<div class="order_options_div_order" >
        <div class="trigger">
        <p >ONLINE ORDER</p>
        </div>
        <div class="toggle_container">
            <div class="block">
            <form method="post" name="order_selection_form" class="order_selection_form" id="order_selection_form" action="../php/order_selection_process.php">
            <input type="hidden" name="order_selection" value="" >
                <span value="order_only" id="order_only" name="order_selection_order_only" onClick="submitform(this)">
                online order
                </span>
                <br />
                <span value="upload_only" id="upload_only" name="order_selection_uplaod_only" onClick="submitform(this)">
                online file upload
                </span>
                <br />
                <span value="order_and_upload" id="order_and_upload" name="order_selection_order_and_upload" onClick="submitform(this)">
                online upload and order
                </span>
                <br />
               
                <div style="margin-left:15px;" class="more_options_trigger"><div class="trigger">more options</div>
                 
                 <div class="toggle_container">
                 <br />
                     asdf
                     <br />
                     1234
                     <br />
                                      asdf
                     <br />
                     1234
                     <br />
                   
                 </div>
                </div>

--JAVASCRIPT--

$(document).ready(function(){

    //Hide (Collapse) the toggle containers on load
    $(".toggle_container").hide();

    //Switch the "Open" and "Close" state per click then slide up/down (depending on open/close state)
    $("div.trigger").click(function(){
   
        $(this).toggleClass("active").next().slideToggle(400);
        return false; //Prevent the browser jump to the link anchor
    });

});


I already updated the code and save it, chek it out
0
 

Author Comment

by:hibbsusan
ID: 36499086
it's pretty good, but it rolls the div back up whenever you click anywhere inside of it, not just when you click the more options link..

thanks!
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 3

Expert Comment

by:evedder
ID: 36499115
well complementing leakim's idea, you just have to give an id to your div containing the "more options" and in the jquery
$(".more_options_trigger").click(function() {
        $("div#yourid", this).slideToggle();
    })

0
 

Author Comment

by:hibbsusan
ID: 36499177
hmm...that seems still to have the same problem..
0
 
LVL 3

Expert Comment

by:evedder
ID: 36499275
well if you check the complete code i paste here, that code works as you want, there is no modification to your function just a change in your html where we use the same class for "more options"
0
 
LVL 83

Expert Comment

by:leakim971
ID: 36499293
>whenever you click anywhere inside of it, not just when you click the more options link..

in this case put the content you want to slide OUTSIDE the div
0
 
LVL 83

Assisted Solution

by:leakim971
leakim971 earned 1000 total points
ID: 36499306
    $(".more_options_trigger").click(function() {
        //$("div div", this).slideToggle();
        $(this).next(".container").slideToggle();
    })

Open in new window


with :
                 <div style="margin-left:15px;" class="more_options_trigger">more options</div>
                             <div class="container" style="display:none" >
                 <div><br />
                 asdf
                 <br />
                 1234
                 <br />
                 
                 asdf
                 <br />
                 1234
                 <br />
                     </div>
                 </div>

Open in new window

test page : http://jsfiddle.net/tMRtK/6/
0
 

Author Comment

by:hibbsusan
ID: 36502717
evedder,

you're right. I'm sorry, your code works perfectly. but on my site,  there is weird passion mg at the bottom of the box that doesn't appear in your jsfiddle file. http:// www.iscotest.com/site7/test I was playing around putting max-heights in the jquery function, but it send still not to work. have you any idea why? thank you so much !
0
 
LVL 3

Expert Comment

by:evedder
ID: 36504985
which browser are you using?
0
 
LVL 3

Expert Comment

by:evedder
ID: 36505185
well im not sure exactly what error you mean but checking your code it seems to me you have an extra comma. I indicate where below


$().ready(function() {
      // validate the comment form when it is submitted
      $("#commentForm").validate();
      
      // validate signup form on keyup and submit
      $("#signupForm").validate({
            rules: {
                  firstname: "required",
                  lastname: "required",
                  
                  email: {
                        required: true,
                        email: true
                  }, <---------------------------------------------HERE
            },
            messages: {
                  firstname: "Please enter your firstname",
                  lastname: "Please enter your lastname",
                  
                  email: "Please enter a valid email address"
            }
      });
});
0
 

Author Comment

by:hibbsusan
ID: 36506094
I use chrome.
0
 

Author Closing Comment

by:hibbsusan
ID: 36511316
thanks guys. worked really well. both solutions.
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question