CODEWITHSUNDEEP
jquerycss-transitions
LondonBoy
LondonBoy

Reputation: 149

CSS max-height transition only affecting other divs?

I have created a vertical list of headings which each expand to display an image and some text when clicked on. I have used jQuery to create this effect.

However, when I click on a heading, while the other headings smoothly move out of the way due to the transition effect, the image/text itself simply appears. I imagine that using three different functions is not the most efficient way to go about this, but please bear with me as I only started learning html etc this week...

Thanks!

HTML:

<h1>Paintings</h1>
<article>
  <h2 class="one">Picture 1</h2>
  <div class="first"><img src="http://www.derekmccrea.50megs.com/images/framed-oil-painting.jpg">
  <p>Some text</p></div>
</article>
<article>
  <h2 class="two">Picture 2</h2>
  <div class="second"><img src="http://i.ebayimg.com/00/s/NDA4WDUwMA==/z/f8IAAOxyRhBSs-0m/$_35.JPG?set_id=2">
  <p>Some more text.</p></div>
</article>
<article>
  <h2 class="three">Picture 3</h2>
  <div class="third"><img src="http://www.culture24.org.uk/asset_arena/9/93/74399/v0_master.jpg">
  <p>Further text.</p></div>
</article>

CSS:

h2 {
  margin-bottom: 0;
  z-index: 1;
  position: relative;
}
article {
  text-align: center;
  margin-bottom: 30px;
}
div {
  opacity: 0;
  max-height: 0;
  transition: max-height .5s;
  -webkit-transition: max-height .5s;
  -moz-transition: max-height .5s;
}
.show-image {
  opacity: 1;
  max-height: 350px;
}

JavaScript:

<script>
  $('.one').on('click', function() {
  $('.first').toggleClass('show-image')
});
  $('.two').on('click', function() {
  $('.second').toggleClass('show-image')
});
  $('.three').on('click', function() {
  $('.third').toggleClass('show-image')
});
</script>

Upvotes: 0

Views: 108

Answers (1)

PiranhaGeorge
PiranhaGeorge

Reputation: 999

Okay, I've done a few things. First I've used .heading and .info classes and slimmed your JS down.

HTML:

<h1>Paintings</h1>
<article>
    <h2 class="heading">Picture 1</h2>
    <div class="info">
        <img src="http://www.derekmccrea.50megs.com/images/framed-oil-painting.jpg" />
        <p>Some text</p>
    </div>
</article>
<article>
    <h2 class="heading">Picture 2</h2>
    <div class="info">
        <img src="http://i.ebayimg.com/00/s/NDA4WDUwMA==/z/f8IAAOxyRhBSs-0m/$_35.JPG?set_id=2" />
        <p>Some more text.</p>
    </div>
</article>
<article>
    <h2 class="heading">Picture 3</h2>
    <div class="info">
        <img src="http://www.culture24.org.uk/asset_arena/9/93/74399/v0_master.jpg" />
        <p>Further text.</p>
    </div>
</article>

JS:

$('.heading').on('click', function() {
    $(this).next('.info').toggleClass('show-image')
});

I changed the CSS by adding overflow: hidden to the div elements, so that the images would be revealed during the transition. I also increased the max-height to 400px so that the text for picture 1 would fit.

CSS:

h2 {
    margin-bottom: 0;
    z-index: 1;
    position: relative;
}
article {
    text-align: center;
    margin-bottom: 30px;
}
div {
    opacity: 0;
    max-height: 0;
    transition: max-height .5s;
    -webkit-transition: max-height .5s;
    -moz-transition: max-height .5s;
    overflow: hidden;
}
.show-image {
    opacity: 1;
    max-height: 400px;
}

You can see it in action on here: http://jsfiddle.net/PiranhaGeorge/bhj1eh53/

Upvotes: 1

Related Questions