Thomas Morgan February 2016

How do I move others divs around upon clicking my jQuery event?

I have inserted a jQuery event into my webpage which allows for a div in my page to expand to reveal more content. I'm having a problem with the surrounding divs not moving down to accommodate for the space needed to display the expanded div.

I initially tested this div in a separate document and found it to work successfully without too much fuss. I worked with other divs to be sure that they'd move upon clicking the event. Upon inserting the same code into my already developed web page however, the surrounding divs remain fixed and the expansion works behind those divs. Why might this be? Could it be that one of my divs beneath the expanded one is somehow fixed?

I researched the CSS property 'position' but can't make any link between these contributing to the problem.

Incase the problem relates to that of my expanded div (instead of the surrounding divs), I shall only post the code for the HTML, CSS & Javascript/jQuery that directly relates to that particular part of my webpage. Please request any further code if you feel it's necessary.

Thank you for taking time to read.

Here is my code:

HTML

<div id="showmorelocations-container"><p>More Locations</p>
    <div class="toggler-expand">

    </div>
</div>

CSS

#showmorelocations-container {
    height: 100px;
    line-height: 150px;
    width: auto;
    margin: auto;
    margin-bottom: 50px;
}

#showmorelocations-container p {
    text-align: center;
    font-family: 'Hind', sans-serif;
    font-size: 20px;
    font-weight: bold;
    text-decoration: none;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    line-height: 100px;
}

.toggler-expand {
    height: 400px;
    width: auto;
    background-color: #FFBBBB;
    display: none;
    margin-top: -25px;
}

jQuery

$(functio        

Answers


Chandan Kumar Thakur February 2016

use this :

$(function() {
    $('#showmorelocations-container p').click(function() {
        $(this).parent().find('.toggler-expand').slideToggle();
    });
});


Roland Krinner February 2016

Is this the behavior you are looking for?

$( document ).ready(function() {
    $('#showmorelocations-container').click(function() {
       $(this).find('.toggler-expand').slideToggle();
    });
});
#showmorelocations-container {
height: 100px;
line-height: 150px;
width: auto;
margin: auto;
margin-bottom: 50px;
background-color:#ccc
}

#showmorelocations-container p {
text-align: center;
font-family: 'Hind', sans-serif;
font-size: 20px;
font-weight: bold;
text-decoration: none;
position: relative;
top: 50%;
transform: translateY(-50%);
line-height: 100px;
}

.toggler-expand {
height: 400px;
width: auto;
background-color: #FFBBBB;
display: none;
margin-top: -25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="showmorelocations-container">
   <p>More Locations</p>
   <div class="toggler-expand">
    <p>Content</p>
  </div>
</div>


Kito February 2016

The issue is most likely related to the fact that you have set a fixed height for your parent container and try to expand the a child.

Change the following line:

#showmorelocations-container {
   height: 100px;  // change px to %
   ...
}

to

#showmorelocations-container {
   height: 100%;
   ...
}

in order to allow the parent to expand if the child expands too.

Check the fiddle here: https://jsfiddle.net/n1dwz8v1/

Post Status

Asked in February 2016
Viewed 3,852 times
Voted 9
Answered 3 times

Search




Leave an answer