• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 680
  • Last Modified:

jquery sliding div

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
hibbsusan
Asked:
hibbsusan
  • 5
  • 5
  • 3
2 Solutions
 
leakim971PluritechnicianCommented:
What about :
    $(".more_options_trigger").click(function() {
        $("div div", this).slideToggle();
    })

Open in new window


Test page : http://jsfiddle.net/tMRtK/2/
0
 
evedderCommented:
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
 
hibbsusanAuthor Commented:
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
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.

 
evedderCommented:
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
 
hibbsusanAuthor Commented:
hmm...that seems still to have the same problem..
0
 
evedderCommented:
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
 
leakim971PluritechnicianCommented:
>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
 
leakim971PluritechnicianCommented:
    $(".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
 
hibbsusanAuthor Commented:
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
 
evedderCommented:
which browser are you using?
0
 
evedderCommented:
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
 
hibbsusanAuthor Commented:
I use chrome.
0
 
hibbsusanAuthor Commented:
thanks guys. worked really well. both solutions.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Python 3 Fundamentals

This course will teach participants about installing and configuring Python, syntax, importing, statements, types, strings, booleans, files, lists, tuples, comprehensions, functions, and classes.

  • 5
  • 5
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now