Use a button to toggle content

Question

Here is what I have so far...

<div class="container">
    <div class="outer">
      <p>BOTTOM CONTENT</p>
        <div class="box">
          <p>TOP CONTENT</p>
        </div>
    </div>
</div>

.container {
  position:relative;
  overflow:hidden;
}

.outer {
  width: 300px;
  height: 300px;
  background: lightblue;
  overflow:hidden;
}
.box {
  position:absolute;
  bottom:0;
  left:0;
  width: 300px;
  height: 300px;
  margin-bottom: -300px;
  -webkit-transition: all 0.8s ease;
  -moz-transition: all 0.8s ease;
  -o-transition: all: 0.8s ease;
  transitions: all 0.8s ease;
  background: rgba(151, 251, 152, 1);
}
.outer:hover > .box {
  margin: 0;
}
.box p {
  margin: 0;
  padding: 5px 0 5px 0;
}

...can I make that transition happen using a button toggle as opposed to the hover? There will be multiple instances of this on the page if that makes a difference.

FYI - there is currently no JS used but I am not opposed to using it.

gioNicol · Accepted Answer · 2014-08-25 12:10:21Z

2

Here is a easy and fast solution:

Jquery:

$('.outer').click(function(e) {
    $('.box').toggleClass('show');
});

CSS:

.show {
    margin: 0;
}

and exlcude this part of your css:

.outer:active > .box {
  margin: 0;
}

See JSFiddle HERE

Hope it helps...
Sorry if my english is bad...

answered Aug 25, 2014 at 12:10

gioNicol

3391 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

John Over a year ago

This one works perfectly. However, is there a way to make it so that multiple instances of this would work on a single page without doing writing a script for each instance?

gioNicol Over a year ago

@John Yep, just add a .children() selector in the script, like: $(this).children('.box'). This works very well, but the .outer div needs to be parent of .box div. CLICK HERE for the updated JsFiddle.

John Over a year ago

You, sir, are a life saver. One final thing and I apologize for not bringing it up earlier; can I use a button just underneath each div to show and hide the "top content"?

gioNicol Over a year ago

@John Yep again! The button needs to be inside the .container div and you can use the .prev() selector in JQuery. However, it's necessary you change the position: relative from .container to .outer. Check this out: jsfiddle.net/fpxLau4x/3

John Over a year ago

You rock, gio_nicol! Thanks again for the help, I would have racked my brain for months just to figure that out on my own.

|

Collectives™ on Stack Overflow

Use a button to toggle content

1 Answer 1

See JSFiddle HERE

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

See JSFiddle HERE

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related