(Jquery) On click div expands with css transition

Question

I want to expand and decrease height of header when I press click on div "arrow". I've tried to addClass with Jquery, but it doesn't really work HTML:

<header>
    <p>The title..</p>
    <h1>Some text</h1>
      <div class="arrow" id="arrow">
        <img src="img/arrow.svg" />
      </div>
</header>

CSS

header { 
  background: #2282A4;
  color: #fff;
  text-align: center;
  width: 100%;
  height: 450px;
  transition: height 0.5 ease;
}
expandheight {
  height: 850px;
}

JQuery:

$(document).ready(function() {
   $(function() {
      $('#arrow').click(function() {
         $('header').addClass('expandheight');
}); 
}); 
});

I don't know how I can decrease height now with the same button, to remove "expandheight" class when it is active and add it when it is not... I've tried if/else, I failed.

Answer 1

You have multiple syntax errors:

1. expandheight should be styled using .expandheight
2. use cross browser animation properties
3. use toggleClass to add/remove class

 $(document).ready(function() { $(function() { $('#arrow').click(function() { $('header').toggleClass('expandheight'); }); }); }); 

 header { background: #2282A4; color: #fff; text-align: center; width: 100%; height: 450px; -webkit-transition:height 0.5s ease; -moz-transition:height 0.5s ease; transition:height 0.5s ease; } .expandheight { height: 850px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <header> <p>The title..</p> <h1>Some text</h1> <div class="arrow" id="arrow"> <img src="img/arrow.svg" /> </div> </header> 

Answer 2

If you want to expand and decrease the height of the header, use toggleClass() rather than using addClass()

jQuery(document).ready(function() {
    jQuery(function() {
        jQuery('#arrow').click(function() {
            jQuery('header').toggleClass('expandheight');
        });
    });
});

Also, you had a few errors in your code. I have created a jsfiddle to show you it working.

https://jsfiddle.net/7yodz723/

(I put a border around the arrow just so we can clearly see the example working)

Answer 3

Just use toggle class to switch classes.

 $(document).ready(function() { $(function() { $('#arrow').click(function() { $('header').toggleClass('expandheight'); }); }); }); 

 header { background: #2282A4; color: #fff; text-align: center; width: 100%; height: 450px; transition: height 0.5 ease; } .expandheight { height: 850px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <header> <p>The title..</p> <h1>Some text</h1> <div class="arrow" id="arrow"> <img src="img/arrow.svg" /> </div> </header>