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)

CSS3 animation – steps function explained

Detailed explanation of CSS3 to achieve responsive accordion effect

CSS3 animation – steps function explained

Design and implementation of supermarket commodity management system based on Mysql+JavaSwing

Detailed explanation of how to synchronize data from MySQL to Elasticsearch

How to encapsulate axios request with vue

Design: A willful designer

MySQL-group-replication configuration steps (recommended)

Detailed explanation of overlay network in Docker

MYSQL updatexml() function error injection analysis

JavaScript to implement the web version of the snake game

Difference between varchar and char types in MySQL

Recommend

Graphical steps of zabbix monitoring vmware exsi host

SQL Server database error 5123 solution

Sample code for flask and vue front-end and back-end separation project deployment

Detailed analysis of the usage and application scenarios of slots in Vue

Linux system repair mode (single user mode)

Practice of using Vite2+Vue3 to render Markdown documents

Methods and techniques for designing an interesting website (picture)

MySQL database 8 - detailed explanation of the application of functions in the database

11 Reasons Why Bootstrap Is So Popular

How to install and deploy MySQL 8.0 under CentOS8

CentOS 7.5 deploys Varnish cache server function

Detailed process of installing Jenkins-2.249.3-1.1 with Docker

Example code for implementing dynamic column filtering in vue+element table

Example code for implementing 3D Rubik's Cube with CSS

Vue component encapsulates sample code for uploading pictures and videos