You are currently viewing Accordion: CSS Tutorial (Day 23 of CSS3 in 30 Days)

Accordion: CSS Tutorial (Day 23 of CSS3 in 30 Days)



Create an information accordion with only CSS3!

⭐️Files you need ⭐️
💻Accordion Code: https://www.dropbox.com/sh/l9mbthihrcx0cba/AACzoWnmg8vB4f9WKQAmsg1Ka?dl=0
💻All tutorials in this series need this “_theme-styles” directory (only download once): https://www.dropbox.com/sh/890hx6ke34oovaz/AAByJ-jb-H5pWuIUx7t_GvQqa?dl=0

This video works as a stand-alone tutorial but is also day 23 of CSS3 in 30 Days. For the rest of the series, check out this playlist: https://www.youtube.com/playlist?list=PLWKjhJtqVAbl1AfjiGyYxwpdAPi5v-1OU

CSS3 in 30 Days is developed by Brad Hussey. Check out his website for more great tutorials: https://codecollege.ca/

Learn to code for free and get a developer job: https://www.freecodecamp.org

Read hundreds of articles on programming: https://medium.freecodecamp.org

And subscribe for new videos on technology every day: https://youtube.com/subscription_center?add_user=freecodecamp

source

This Post Has 12 Comments

  1. GoCode Media

    This is an awesome tutorial about CSS3. I have being learning more s about using some new cool CSS3 features. THANKS FOR THE SERIES

  2. bibibobs

    I've got a few questions: why do you select the p tag if you're using BEM? And why are you using a 5px grid instead of 4px?

  3. Ashish Arora

    ONLY 7 DAYS AND 7 VIDEO LEFT . CAN YOU CHANGE YOUR TITLE TO CSS3 IN 100 DAYS .BECAUSE YOU ARE TEACHING ABSOLUTELY FXCKING AWESOME BRO . LOVE YOU BRO. THANK YOU SO EVERYTHING . YOU ARE GREAT TEACHER .

  4. i have found another way to dove it man
    like following example:
    html:
    <label for='cat' > cat </label>
    <input type="checkbox" id="cat">
    <div class='cat-def'>
    <h1>cat say meaw</h1>
    </div>

    css:

    #cat{
    display:none;
    }
    .cat-def{
    height:0px;
    transition:.5s;
    }
    #cat:active + .cat-def{
    height:30px;
    }

  5. Chris Jordan

    hi Guy's
    any one can help me please CSS I want put 35 page in csss
    email:zivanga@gmail.com
    Many thanks.

  6. FuzzyPumpkin

    Problem with this code on both Firefox and Chrome (didn't test in MS browsers): when you click on an accordion item, page display jumps to bottom.

  7. Ashley Collins

    Thank you, me and my wife are learning HTML and CSS and I've done all of the videos that I thought was interesting features, followed you example and applied it in creating my own dummy websites and this is amazing! Please keep doing what your doing!

  8. Business Opportunity in Ruvol

    I have invented a Board Game [still unpublished and not yet out in the market] that I believe is guaranteed to be as challenging and exciting as CHESS. I called it “RUVOL.”

    It is my hope that one day Ruvol may surpass chess as the “Number One Board Game in the World.”

    The weakness of chess is it always starts in fixed positions that the opening moves become “memorizable.” In fact, not a few have so mastered the moves that they can play against their opponents “blindfolded.” It is for this very reason that the great Bobby Fischer introduced his so-called “Fischer Random Chess,” where the starting position of the pieces is “randomized” to make the memorization of openings impracticable. Fortunately, it is also for this reason that I invented Ruvol where “every game” has been calculated to be a challenging one to play.

    HOW IS RUVOL PLAYED and HOW YOU CAN MONETIZE IT?

    I detailed everything in my YouTube video. Here is the link: https://www.youtube.com/watch?v=jcqth0m3-R0

    BIG MONEY POTENTIAL IN RUVOL!

    It is worthwhile to note that the people who play chess will be the same people who will play Ruvol. In my Google search, I learned there are around 800 million chess players in the world. Even just a small percentage of these 800 million is good enough to earn big money from Ruvol either as an ONLINE GAME BUSINESS or as a PHYSICAL PRODUCT DISTRIBUTOR.

    You may contact me at: rodolfovitangcol@gmail.com.

    Thanks and God bless!

    RODOLFO MARTIN VITANGCOL
    The Ruvol Inventor

Leave a Reply