Expanding a div with CSS transition is triggered by a click event in JQuery

Question

Expanding a div with CSS transition is triggered by a click event in JQuery

Looking to modify the height of the header by expanding and reducing it when clicking on the "arrow" div. Attempted to use addClass with jQuery without success. 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');
}); 
}); 
});

In need of assistance in decreasing the height with the same button, removing the "expandheight" class when active and adding it when not... Struggled with if/else statements.

javascript jquery html css expand

Answer 1

Answer №1

You are encountering several syntax errors:

expandheight should be styled using .expandheight
Ensure cross-browser compatibility for animation properties
Implement the use of toggleClass to easily add or remove classes

$(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

You are encountering several syntax errors:

expandheight should be styled using .expandheight
Ensure cross-browser compatibility for animation properties
Implement the use of toggleClass to easily add or remove classes

$(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 3

Answer №2

To expand or decrease the height of the header, it is recommended to use toggleClass() instead of addClass()

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

There were some errors in your previous code. I have created a jsfiddle link to demonstrate it working correctly.

https://jsfiddle.net/7yodz723/

(I have added a border around the arrow for better visualization of this example)

Answer 4

To expand or decrease the height of the header, it is recommended to use toggleClass() instead of addClass()

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

There were some errors in your previous code. I have created a jsfiddle link to demonstrate it working correctly.

https://jsfiddle.net/7yodz723/

(I have added a border around the arrow for better visualization of this example)

Answer 5

Answer №3

To easily switch between different classes, you can simply use the toggleClass method.

$(document).ready(function() {
  $(function() {
    $('#toggleButton').click(function() {
      $('section').toggleClass('expandwidth');
  });
 });
});

header { 
  background: #444;
  color: #fff;
  text-align: center;
  width: 100%;
  height: 300px;
  transition: width 0.5s ease;
}
.expandwidth {
  width: 80%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<section>
  <p>Some content..</p>
  <h2>More text here</h2>
  <button id="toggleButton">Toggle</button>
</section>

Answer 6

To easily switch between different classes, you can simply use the toggleClass method.

$(document).ready(function() {
  $(function() {
    $('#toggleButton').click(function() {
      $('section').toggleClass('expandwidth');
  });
 });
});

header { 
  background: #444;
  color: #fff;
  text-align: center;
  width: 100%;
  height: 300px;
  transition: width 0.5s ease;
}
.expandwidth {
  width: 80%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<section>
  <p>Some content..</p>
  <h2>More text here</h2>
  <button id="toggleButton">Toggle</button>
</section>

Expanding a div with CSS transition is triggered by a click event in JQuery

Answer №1

Answer №2

Answer №3

Similar questions

Tips for concealing a div element once the final section is reached

Can you explain the distinction between data-ng and ng?

A method for increasing a counter using only an instance of a class or function without accessing its methods or properties in Javascript

Exploring the Benefits of Using JSON in AJAX Requests

Verify the type of email domain (personal or corporate)

Ways to enable automatic scrolling of a page as the content expands (Utilizing collapsible elements)

The Justin TV API: Leveraging the Power of Jquery and JSON

What is the limit of CSS includes that IE can process?

Encounter a syntax error in Google Maps JavaScript API v3 while accessing it on BlackBerry 7

Pause the initial ajax data loading in Tabulator.js and instead load data only after the first filter is applied

fetch Active Directory user details using React

When removing a specific option from a dropdown menu, the default selection is chosen instead of the

Having trouble retrieving data from the controller in JSON format

Cross-domain scripting

ALSO, various criteria

Every time I try to deploy my app on Heroku, it keeps crashing with a strange error popping up on the home screen

Rendering Based on Conditions in React Native

Exploring the functionalities of command line arguments in Vue.js

Ways to determine if an object contains an array

Trouble with saving data to a database using AJAX