CODEWITHSUNDEEP
javascriptjquerycssbuttontoggle
John
John

Reputation: 178

Use a button to toggle content

Here is what I have so far...

http://codepen.io/john84/pen/FctgH

<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.

Upvotes: 0

Views: 77

Answers (1)

gioNicol
gioNicol

Reputation: 339

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...

Upvotes: 2

Related Questions