[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

jquery sliding div

Posted on 2011-09-07
13
Medium Priority
?
674 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 5
  • 3
13 Comments
 
LVL 82

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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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 82

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 82

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

Survive A High-Traffic Event with Percona

Your application or website rely on your database to deliver information about products and services to your customers. You can’t afford to have your database lose performance, lose availability or become unresponsive – even for just a few minutes.

Question has a verified solution.

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

This article was originally published on Monitis Blog, you can check it here . Today it’s fairly well known that high-performing websites and applications bring in more visitors, higher SEO, and ultimately more sales. By the same token, downtime…
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
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

656 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