Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite

I'm in the process of making a simple webpage, and have run into a wall. Right now, I have a few buttons laid out on the page with the slideToggle animation, and when you click one, a paragraph opens directly under the button. My question is, how can I get all of these separate paragraphs to appear in the same spot? I want them to all appear at the bottom of the page, so that when you click a button, none of the other buttons jump around awkwardly on the page. Here's my HTML: 

<h2>Click to learn more about me!</h2>
    <div class="trait">
        <button>Trait1</button>
    </div>
    <p class="note">Blah</p>

    <div class="trait">
        <button>Trait2</button>
    </div>
    <p class="note">BlahBlah</p>

    <div class="trait">
        <button>Trait3</button>
    </div>
    <p class="note">BlahBlahBlah</p>

And here's my CSS:

div {
    display: inline-block;
}

div p {
    position: relative;
    margin-top: 450px;
}

button {
    border-radius: 100%;
    height: 150px;
    width: 150px;
}

.note {
    color: white;
    font-size: 30px;
    position: relative;
    bottom: 0;
}
share|improve this question
 
If you want them to appear in the same place have you tired putting all of the paragraphs in the same place in your mark-up? –  Diodeus Jun 7 at 18:38
 
Like this? jsfiddle.net/vUyTH –  PSL Jun 7 at 18:42

2 Answers

up vote 1 down vote accepted

I think you want to use position: absolute; instead of relative, and set a left property. For example:

.note {
    color: white;
    font-size: 30px;
    position: absolute;
    bottom: 0;
    left: 0;
}

This will cause all .note paragraphs to overlap each other in the bottom left corner of the document.

share|improve this answer
up vote 0 down vote

You could just have another div like <div id="paragraphInfo"></div> Place it where you want and then use jQuery to take take the paragraph info and show it in the new div.

You could fix up the slideToggle to show and hide when you want but his is just to give you an idea.

$(document).ready(function(){
      $('#paragraphInfo, p').hide();

      $('button').click(function(){
            $('#paragraphInfo').hide();
            pText = $(this).parent().next('.note').html();
            $('#paragraphInfo').html(pText);

            $('#paragraphInfo').slideToggle();
      });

});

UPDATE

Added the paragraph hide once button is clicked so it should slide toggle correctly now.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.