Question

120

Toggle class on HTML element without jQuery

rated 0 times [ 123] [ 3] / answers: 1 / hits: 35523 / 10 Years ago, thu, august 28, 2014, 12:00:00

I have a section on my website which holds all the content, but I want a sidebar with hidden content to smoothly appear from the left at the push of an external button.

CSS transitions can handle the smoothness no problem, and jQuery toggle() can switch between classes to move the hidden div in and out of the screen.

How can I get the same effect without using jQuery?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

arthur

Add To Favorites

Follow

Total Points: 729

Total Questions: 107

Total Answers: 109

Location: China

Member since Mon, Aug 22, 2022

2 Years ago

arthur questions

1 Error: Unexpected token (Note that you need plugins to import files that are not JavaScript) rollup vue package

Thu, Sep 2, 21, 00:00, 3 Years ago

1 Formik & Yup: How to validate if the provided date is eighteen years old?

Mon, Oct 19, 20, 00:00, 4 Years ago

1 Angular 9 how to use debouncetime for input change event (keyup)

Thu, Apr 30, 20, 00:00, 4 Years ago

1 Swiper and current page index

Wed, Feb 19, 20, 00:00, 4 Years ago

1 Google Maps API Billing not Enabled Error - Billing not open

Fri, Jan 10, 20, 00:00, 4 Years ago

View All

answered 10 Years ago brendaw · Accepted Answer

You can implement it only by CSS3:

<label for=showblock>Show Block</label>

<input type=checkbox id=showblock />



<div id=block>

    Hello World

</div>

And the CSS part:

#block {

    background: yellow;

    height: 0;

    overflow: hidden;

    transition: height 300ms linear;

}



label {

    cursor: pointer;

}



#showblock {

    display: none;

}



#showblock:checked + #block {

    height: 40px;

}

The magic is the hidden checkbox and the :checked selector in CSS.

Working jsFiddle Demo.