Parent div height does not change when element slides down

[cgull]

Hello,

I need help with sliding down an element.

When it is sliding down I want the parent's div height to change so it will contain the sliding element.

My html:

<div class="sliderBox">
<ul>
  <li>
    <div class="main">

     <div class="publicationTitleOuter">
      <div class="publicationTitleInner">Kouga/Uitenhage</div>
     </div>

     <p class="issueDate">8 MAY 2013</p>

     <div style="margin-top:10px"></div>

     <div style="width: 121px; margin: 0 auto">
      <a href="http://www.thinklocal.co.za/magazines/thinklocal/kouga/2013-05-08-225" target="_blank">
      <img src="http://tl/assets/img/thinklocal/kouga/tl-kouga-2013-05-08-cover.jpg" alt="Think Local issue: 8 MAY 2013" width="121" height="163" class="issue" />
      </a>
     </div>

     <div style="margin-bottom: 10px"></div>

     <a class="moreBtn" href="#">CLICK FOR MENU</a>
    </div><!-- end main -->          

    <div class="more">
      <h2 class="title">Kouga/Uitenhage</h2>
      <div class="issuemain" style="vertical-align: middle; line-height: 216px; float: left; width: 180px">
       <a href="http://thinklocal.co.za/magazines/thinklocal/kouga/2013-05-08-225" target="_blank">
       <img src="http://tl/assets/img/thinklocal/kouga/tl-kouga-2013-05-08-cover.jpg" alt="Think Local issue: 2013-05-08" width="160" height="216" />
       </a>
      </div>
      <div class="closer"></div>
    </div><!-- end more -->          

</li>

My jquery:

$('.moreBtn').on('click', function()
{
    $(this).parent().next().slideDown();

    return false;
});

The div with the class "more" has a display: none style.
So when I click the CLICK FOR MENU button, the div with the class "more" should slide down, and the div with the class "sliderBox" should grow accordingly.

How do I do that?

Thank you

[JorgeM]

Can you provide the styling as well? Or if you have this site online, the URL would be helpful.

[cgull]

Hi,

I've made some changes so here is the url: Click Here

You can see the problem under the Phonebook section, first CLICK FOR MENU button under Kouga/Uitenhage
You can see that when it slides down, it hides the bottom border of the parent div.

My jquery:

$('.moreBtn').on('click', function()
    {
        $(this).parent().next().slideDown();
        //console.log($($(this).parent().next()));
//      var h = $($(this).parent().parent().parent().find('.more')).height();
        //console.log(h);
        //console.log($(this).parent().parent().parent().parent());
      //$($(this).parent().parent().parent().parent()).css('height', 'auto');
        //console.log($(this).parent().parent().parent().parent().height());

    //  $('.sliderBox').css('border', '5px solid red');
//      $(this).parent().parent().css('height', h+'px');

        return false;
    });

My sliderBox style (The div that needs to change height):

.sliderBox {
    padding: 15px 10px;
    background:#fff;
    -webkit-box-shadow: 0px 0px 5px 1px rgba(100,100,100,0.3);
    -moz-box-shadow: 0px 0px 5px 1px rgba(100,100,100,0.3);
    box-shadow: 0px 0px 5px 1px rgba(100,100,100,0.3);
    overflow:visible;
    margin-top: 12px;
    background:#fff;
    z-index:1;
    position: relative;
    width: 100%
}

The .main div that slides down style:

.sliderBox .more {
position: absolute;
top:2px;
left:0;
z-index:9;
display: none;
background-color: #fff;
width: 100%;
padding: 0 5px;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}

Thank you

[JorgeM]

first CLICK FOR MENU button under Kouga/Uitenhage
You can see that when it slides down, it hides the bottom border of the parent div.

When i click on "click for menu", there is no sliding down, you just loaded new content. I assume that you recently changes this or am I clicking on the wrong item?

[RoryGren]

Have you tried overflow: auto; in your .sliderbox class?

[cgull]

@JorgeM - It slides very quickly, it opens a div with a menu and text.

@RoryGren - If I try overflow: auto; on my sliderbox class it opens too big, it includes the li item in it as well.

Thank you