Jquery toggle content position

Question

The page html

<div class="outbox">
<p class="heading">Header-1 </p>
<div class="content">Lorem ipsum dolor sit amet</div>
<p class="heading">Header-2</p>
<div class="content">Lorem ipsum dolor sit amet</div>
<p class="heading">Header-3</p>
<div class="content">Lorem ipsum dolor sit amet</div>
</div>

CSS

.outbox
{
    margin: 0;
    padding: 0;
}

.heading
{
    background-color: #FF6666;
    border: 1px solid #FF5050;
    text-align: center;
    font-weight: bold;
    margin: 1px;
    padding: 3px 10px;
    cursor: pointer;
    float: right;
    width: 300px;
    height:25px; 
}



.content
{
  background-color: #FFCCCC;
}

JQUery

<script type="text/javascript">
$(document).ready(function() {
  $(".content").hide(); 
  $(".heading").click(function()
  {
    $(this).next(".content").slideToggle(500);
  });
});
</script>

When I click any heading of the content, the expanded part always appears on the top of the page. How can I display it below the heading? Thank you in advance.

score 1 · Answer 1 · answered Jun 19 '13 at 13:20

1

Remove the float: right; style from your heading. Unless it's there on purpose, but in that case your question would sound strange.

answered Jun 19 '13 at 13:20

Michal Klouda

14,263
7
53
77

score 1 · Answer 2 · answered Jun 19 '13 at 13:21

1

Your header elements are floated, but their adjacent divs aren't.

Just remove or adjust the float: right; property of your heading class.

Here's a fiddle:

http://jsfiddle.net/GpJKe/

answered Jun 19 '13 at 13:21

Filippos Karapetis

4,367
21
39

score 1 · Accepted Answer · answered Jun 19 '13 at 13:25

Try this:

HTML

<div class="outbox">
    <div class="container">
        <p class="heading">Header-1 </p>
        <div class="content">Lorem ipsum dolor sit amet</div>
    </div>
    <div class="container">
        <p class="heading">Header-2</p>
        <div class="content">Lorem ipsum dolor sit amet</div>
    </div>
    <div class="container">
        <p class="heading">Header-3</p>
        <div class="content">Lorem ipsum dolor sit amet</div>
    </div>
</div>

CSS

.outbox
{
    margin: 0;
    padding: 0;
}

.heading
{
    background-color: #FF6666;
    border: 1px solid #FF5050;
    text-align: center;
    font-weight: bold;
    margin: 1px;
    padding: 3px 10px;
    cursor: pointer;
    width: 300px;
    height:25px; 
}
.container{
    float:right;
}


.content
{
  background-color: #FFCCCC;
}

Fiddle http://jsfiddle.net/LMWpZ/

thank you, it works. the only issue when there are multiple rows the content mis-aligns. I fixed setting width of the content section as follows. .content { background-color: #FFCCCC;width:300px; } — Yass, Jun 19 '13 at 14:53

score 0 · Answer 4 · edited May 23 '17 at 12:05

Float right your .content class and add clear:both to your .heading and .content and try the below approach:

.heading {
    clear: both;
    background-color: #FF6666;
    border: 1px solid #FF5050;
    text-align: center;
    font-weight: bold;
    margin: 1px;
    padding: 3px 10px;
    cursor: pointer;
    float: right;
    width: 300px;
    height:25px;
}
.content {
    clear: both;
    float: right;
    background-color: #FFCCCC;
}

What is the use of style=“clear:both”?

Check out the JSFiddle

Jquery toggle content position

4 Answers4