CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Oam Psy
Oam Psy

Reputation: 8663

Setting height of surrounding DIV after inner DIV is expanded/collapsed

I have a simple accordion. What i am trying to do is that when an item within the content is clicked (How to reach us) for example, the hidden subsequent text is expanded. Once expanded, the new height of the content DIV is calculated. This newly calculated content DIV height is then assigned to the height of .wrapper. The red wrapper should then surround the entire box.

See fiddle: http://jsfiddle.net/oampz/jLQf4/1/

HTML:

<div class="wrapper">
    <ul class="panel">
        <li>
            <div class="heading">   <a>Menu 1</a>

            </div>
            <div class="content">
                <ul>
                    <h2>Top Ten Questions</h2>
                    <li>    
                        <a href="">How to reach us</a>
                        <p class="hide">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                    </li>
                    <li>
                        <a href="">How to email us</a>
                        <p class="hide">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                    </li>
                    <li>
                        <a href="">Contact Number</a>
                        <p class="hide">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                    </li>
                </ul>
            </div>
        </li>
    </ul>
</div>

CSS:

.heading {
    color: white;
    font-weight: bold;
    padding: 15px 0 15px 20px;
    background: grey;
}
.content {
    background: #99CCFF;
    position: absolute;
}
.hide {
    display: none;
}

.wrapper {
    background: #FFD1E0;
    position: relative;
}

jQuery:

$(".content ul li a").click(function () {
  var $this = $(this);
  $this.next(".content ul li a").show(400);
  $this.parent().siblings().children().next().hide();
  return false;
});

UPDATE *******************************

After the .onClick, would something like:

$(".wrappper").css({'height':($(".content").height()+'px')});

Work?

UPDATE *******************************

Updated fiddle: http://jsfiddle.net/oampz/jLQf4/9/

Upvotes: 0

Views: 158

Answers (1)

badAdviceGuy
badAdviceGuy

Reputation: 2090

If I understand your issue correctly, then this may help:

Demo Fiddle

Your content div doesn't have a specified width, so it's automatically wrapping whatever is inside of it, when you show your text it extends out further than it was initially.

EDIT - I think that there may be an easier way to go about what you're trying to accomplish. Instead of using JS to dynamically update the .wrapper I think it would be easier to remove the position: absolute from .content. Some padding seemed to make it look the same.

CSS: 

.content {
    width: 280px;
    background: #99CCFF;
    padding: 10px 0;

    //position:absolute;
}

Upvotes: 1

Related Questions