Detailed explanation of CSS3 to achieve responsive accordion effect

Detailed explanation of CSS3 to achieve responsive accordion effect

I recently watched a video of a foreign guy using CSS3 to achieve an accordion effect, so I wrote it down after learning it myself and recorded it in the form of a blog for my future review. The code structure is as follows (the font used is Genericons):

The final effect is as follows:

In full screen:

When the screen width is less than 960px:

Let's take a look at the basic structure of the page (index.html):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
      <!--Title-->
    <header>
      <h1>Follow me on social media</h1>
    </header>
      
      <!--Accordion section-->
    <ul class="accordion">
      <li class="tab">
        <div class="social youtube">
          YouTube
        </div>
        <div class="content">
          <h1>YouTube</h1>
          <p>Lorem ipsum dolor sit amet consectetur 
            adipisicing elit.Culpa, consectetur.</p>
        </div>
      </li>
      <li class="tab">
        <div class="social facebook">
          <a href="#">Facebook</a>
        </div>
        <div class="content">
          <h1>Facebook</h1>
          <p>Lorem ipsum dolor sit amet consectetur 
            adipisicing elit.Culpa, consectetur.</p>
        </div>
      </li>
      <li class="tab">
        <div class="social twitter">
          Twitter
        </div>
        <div class="content">
          <h1>Twitter</h1>
          <p>Lorem ipsum dolor sit amet consectetur 
            adipisicing elit.Culpa, consectetur.</p>
        </div>
      </li>
      <li class="tab">
        <div class="social instagram">
          Instagram
        </div>
        <div class="content">
          <h1>Instagram</h1>
          <p>Lorem ipsum dolor sit amet consectetur 
            adipisicing elit.Culpa, consectetur.</p>
        </div>
      </li>
      <li class="tab">
        <div class="social linkedin">
          <a href="#">Linkedin</a>
        </div>
        <div class="content">
          <h1>Linkedin</h1>
          <p>Lorem ipsum dolor sit amet consectetur 
            adipisicing elit.Culpa, consectetur.</p>
        </div>
      </li>
       <li class="tab">
        <div class="social github">
          Github
        </div>
        <div class="content">
          <h1>Github</h1>
          <p>Lorem ipsum dolor sit amet consectetur 
            adipisicing elit.Culpa, consectetur.</p>
        </div>
      </li>
    </ul>
  </div>
</body>
</html>

Style (style.css):

*{
  margin: 0;
  padding: 0;
  border: none;
}

body{
  font-family: Arial, Helvetica, sans-serif;
  background-color: #222;
  color: #fff;
}

/*Set the font, because the following icons need to use*/
@font-face {
  font-family: 'Genericons';
  src: url('font/genericons-regular-webfont.woff') format('woff'),
  url('font/genericons-regular-webfont.eot') format('truetype');
}

/*Set the width of the outer container*/
.container{
  width: 80%;
  margin: 20px auto;
}

header h1{
  font-size: 2rem;
  padding: 1rem;
  text-align: center;
}

/*Note that the font-size is set to 0 here, otherwise a very bad picture will appear. We will set the font size of the text that needs to be displayed later, because the a link does not want it to display content*/
.accordion{
  width: 100%;
  min-width: 800px;
  height: 200px;
  background-color: #333;
  list-style: none;
  display: block;
  overflow: hidden;
  font-size: 0;
}

/*Set each li to inline-block, so that they are arranged in a row and overflow is hidden, because the width of .content under .tab is 360px, and the width of .tab will only become 450px when it is hovered, when .content is just displayed. In addition, set the transition to make its width increase smoothly*/
.tab{
  width: 80px;
  height: 100%;
  display: inline-block;
  position: relative;
  margin: 0;
  background-color: #444;
  border: 1px solid #333;
  overflow: hidden;
  transition: all .5s ease .1s;
}

.tab:hover{
  width: 450px;
}
.tab:hover .social a:after{
  transform: translateX(-80px);
}
.tab:hover .social a:before{
  transform: translateX(-100px);
}

/*Set the positioning to relative positioning, otherwise part of .content will be covered*/
.tab .content{
  position: relative;
  width: 360px;
  height: 100%;
  background-color: #fff;
  color: #333;
  margin-left: 80px;
  padding: 50px 0 0 15px;
}

.tab .content h1{
  font-size: 2.5rem;
  margin-top: 20px;
}
.tab .content p{
  font-size: .85rem;
  line-height: 1.6;
}

/Set the element's width and height and font to Genericons, otherwise the icon will not appear and only a white empty frame will be displayed/
.social a:before,
.social a:after{
  position: absolute;
  width: 80px;
  height: 200px;
  display: block;
  text-indent: 0;
  padding-top: 90px;
  padding-left: 25px;
  font:normal 30px Genericons;
  color: #fff;
  transition: all .5s ease;
}

/*Because the icon will be larger when we hover over it, the font and padding of the after pseudo-class need to be reset, and the margin-left should be set to 80px, which will display the small icon of the before pseudo-class by default*/
.social a:after{
  font-size: 48px;
  padding-top: 80px;
  padding-left: 20px;
  margin-left: 80px;
}

/*Add icons*/
.youtube a:before,
.youtube a:after{
  content: '\f213';
}

.youtube a:after{
  background-color: #fc0000;
}

.twitter a:before,
.twitter a:after{
  content: '\f202';
}

.twitter a:after{
  background-color: #6dc5dd;
}

.facebook a:before,
.facebook a:after{
  content: '\f204';
}

.facebook a:after{
  background-color: #3b5998;
}

.linkedin a:before,
.linkedin a:after{
  content: '\f208';
}

.linkedin a:after{
  background-color: #00a9cd;
}

.instagram a:before,
.instagram a:after{
  content: '\f215';
}

.instagram a:after{
  background-color: #6dc993;
}

.github a:before,
.github a:after{
  content: '\f200';
}

.github a:after{
  background-color: #6e5494;
}

/*When the maximum screen width is 960px*/
@media(max-width:960px){
  .container{
    width: 70%;
  }
    /*Set the height to auto*/
  .accordion{
    min-width: 450px;
    height: auto;
  }

    /*Let li be displayed as block, so that it will be arranged in order*/
  .tab{
    width: 100%;
    display: block;
    border-bottom: 1px solid #333;
  }
    /*This must be set, because the original .tab:hover width is 450px. If the width of .tab is 600px, there will be 150px of blank space when hovering, which is not the effect we want*/
  .tab:hover{
    width: 100%;
  }
  .tab .content{
    width: 85%;
  }
    /*Set the padding value of the corresponding pseudo class so that it appears roughly in the middle*/
  .social a:before{
    padding-top: 60px;
    padding-left: 25px;
  }
  .social a:after{
    padding-top: 50px;
    padding-left: 20px;
  }
}

This is the end of this article on how to achieve responsive accordion effect with CSS3. For more relevant CSS3 responsive accordion content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!

<<:  SQL implementation of LeetCode (197. Rising temperature)

>>:  Comparative Analysis of UI Applications of Image Social Networking Sites (Figure)

Recommend

Solutions to problems related to software package dependency reporting during installation in Linux

Table of contents background 1) Enable the keepch...

Pure CSS to achieve hover image pop-out pop-up effect example code

Implementation principle The main graphics are co...

Several ways to clear arrays in Vue (summary)

Table of contents 1. Introduction 2. Several ways...

Detailed steps to install mysql 8.0.18-winx64 on win10

1. First go to the official website to download t...

Detailed explanation of browser negotiation cache process based on nginx

This article mainly introduces the detailed proce...

Implementation of CSS dynamic height transition animation effect

This question originated from a message on Nugget...

CSS Tutorial: CSS Attribute Media Type

One of the most important features of a style she...

JS implements a stopwatch timer

This article example shares the specific code of ...

Drop-down menu and sliding menu design examples

I found a lot of websites that use drop-down or sl...

In-depth explanation of nginx location priority

location expression type ~ indicates to perform a...

7 major elements of web page redesign Share the 7 major elements of web page redesign

Shopify Plus is the enterprise version of the e-c...

Introduction to local components in Vue

In Vue, we can define (register) local components...

Steps for importing tens of millions of data into MySQL using .Net Core

Table of contents Preliminary preparation Impleme...

Summary of practical skills commonly used in Vue projects

Table of contents Preface 1. Use $attrs and $list...

How to use vite to build vue3 application

1. Installation Tip: There is currently no offici...