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
Solved

jquery sliding div

Posted on 2011-09-07
13
665 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 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
How Do You Stack Up Against Your Peers?

With today’s modern enterprise so dependent on digital infrastructures, the impact of major incidents has increased dramatically. Grab the report now to gain insight into how your organization ranks against your peers and learn best-in-class strategies to resolve incidents.

 
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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying 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

Suggested Solutions

Title # Comments Views Activity
"Go Fund Me" type plugin 5 24
replica website 2 35
JQuery Syntax... 4 37
Non-Resizable Pharagraph 2 7
Learn by example how to specify CSS selectors for Selenium WebDriver test automation software.
Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

838 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