Solved

jquery sliding div

Posted on 2011-09-07
13
667 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 250 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
Is Your DevOps Pipeline Leaking?

Is your CI/CD pipeline a hodge-podge of randomly connected tools? You’ve likely got a tool to fix one problem & then a different tool to fix another, resulting in a cluster of tools with overlapping functionality. Learn how to optimize your pipeline with Gartner's recommendations

 
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 250 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

Major Incident Management Communications

Major incidents and IT service outages cost companies millions. Often the solution to minimizing damage is automated communication. Find out more in our Major Incident Management Communications infographic.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Geolocation works...sometimes 2 37
HTML CSS and  Table design 4 68
Difference between Leaflet and MapBox? 5 45
Json and ajax javascript 24 23
Because your company can’t afford for you to make SEO mistakes, you’ll want to ensure you’re taking the right steps each and every time you post a new piece of content. This list of optimization do’s and don’ts can help you become an SEO wizard.
Although a lot of people devote their energy toward marketing for specific industries, there are some basic principles that can be applied to any sector imaginable. We’ll look at four steps to take and examine how those steps were put into action fo…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…

734 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