Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Jun 2005
    Posts
    153
    Thanks
    26
    Thanked 0 Times in 0 Posts

    Collapsing a <div> when contents are hidden

    Hello,

    I have the following scenario:
    +-----------------------------------------+
    |``````````````Main Div````````````````|
    |+-------------------+-------------------+|
    ||````little div 1```` |````little div 2`````||
    ||`````````````````| ```````````````` ||
    ||`````````````````| ```````````````` ||
    |+-------------------+-------------------+|
    +------------------------------------------+

    I have this script call in my jQuery:
    Code:
    $("#littlediv1").click($("#littlediv2").toggle())
    Which automatically will either hide or unhide "little div 2" when "little div 1" is clicked.

    Which turns my screen into this:
    +-----------------------------------------+
    |``````````````Main Div````````````````|
    |+-------------------+``````````````````|
    ||````little div 1```` |``````````````````|
    ||`````````````````| ```````````````` `|
    ||`````````````````| ```````````````` `|
    |+-------------------+``````````````````|
    +------------------------------------------+

    I do not know the size of "little div 1" because of variable data. But is there a way to make "Main Div" automatically collapse when this data is hidden so that it would look like this?
    +---------------------+
    |``````Main Div``````|
    |+-------------------+|
    ||````little div 1```` ||
    ||`````````````````||
    ||`````````````````||
    |+-------------------+|
    +---------------------+
    Also it would re-expand when "little div 1" is clicked again.

    Is there a jQuery collapse div or a css collapse attribute I can use for this?

  • #2
    UE Antagonizer Fumigator's Avatar
    Join Date
    Dec 2005
    Location
    Utah, USA, Northwestern hemisphere, Earth, Solar System, Milky Way Galaxy, Alpha Quadrant
    Posts
    7,691
    Thanks
    42
    Thanked 637 Times in 625 Posts
    You say "collapse", but you really mean resize the width, since collapsing is a vertical thing. You can change the width of the div with the .css() function.

    http://docs.jquery.com/CSS/css#namevalue

  • #3
    Regular Coder
    Join Date
    Jun 2005
    Posts
    153
    Thanks
    26
    Thanked 0 Times in 0 Posts
    .css() worked great I just need to determine .attr("width") to determine the width and then use .css("width") to change the width of the other one.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •