Author: battleKing warehouse: Github, CodePen blog: CSDN, nuggets feedback email: [email protected] Special statement: original is not easy, shall not be reproduced without authorization or plagiarism, if need to be reproduced can contact the author authorized

background

Accordion folding card display effect, generally used to show pictures, photos, text and so on. Its main features are: when we click on any photo, that photo expands slowly like an accordion, and other photos fold slowly like an accordion. Later, we can add a variety of rich effects to it, such as automatic rotation, increase 3D stereo sense……

The final result

Add HTML files

  1. Add the outermost layerdivNamed class namebox
  2. inboxAdd five class names to itpanel 的 div
  3. In the first class namepanel 的 divaddactiveThe name of the class
  4. Each class is namedpanel 的 divAdd a<h3> </h3>
  <div class="box">
    <div class="panel active"">
      <h3>Explore The World</h3>
    </div>
    <div class=" panel">
      <h3>Wild Forest</h3>
    </div>
    <div class="panel">
      <h3>Sunny Beach</h3>
    </div>
    <div class="panel">
      <h3>City on Winter</h3>
    </div>
    <div class="panel">
      <h3>Mountains - Clouds</h3>
    </div>
  </div>
Copy the code

2. Add the CSS file

Initialize the page first

  1. Set up the* 为 box-sizing: border-box
  2. Set up thebodyKeep the whole project centered
body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
}
Copy the code

Introduces a random gallery

Purpose: to produce random false graph for testing

Lorem Picsum official website, all images ID

  • usage
  1. Random pictureshttps://picsum.photos/200/300
  2. Prevent duplicate random imageshttps://picsum.photos/1350/900?random=1
  3. Specify a specific imagehttps://picsum.photos/id/237/200/300

The main style of code

.box {
  display: flex;
  width: 90vw;
}

.panel {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 80vh;
  border-radius: 50px;
  color: #fff;
  cursor: pointer;
  flex: 0.5;
  margin: 10px;
  position: relative;
  -webkit-transition: all 700ms ease-in;
  transition: all 700ms ease-in;
}
.panel:nth-child(1) {background-image: url("https://picsum.photos/1350/900? random=1");
}
.panel:nth-child(2) {background-image: url("https://picsum.photos/1350/900? random=2");
}
.panel:nth-child(3) {background-image: url("https://picsum.photos/1350/900? random=3");
}
.panel:nth-child(4) {background-image: url("https://picsum.photos/1350/900? random=4");
}
.panel:nth-child(5) {background-image: url("https://picsum.photos/1350/900? random=5");
}

.panel h3 {
  font-size: 24px;
  position: absolute;
  bottom: 20px;
  left: 20px;
  margin: 0;
  opacity: 0;
}

.panel.active {
  flex: 5;
}

.panel.active h3 {
  opacity: 1;
  transition: opacity 0.3 s ease-in 0.4 s;
}
Copy the code

Add JS files

The main logic

  1. Get the node firstdocument.querySelectorAll('.panel')
  2. throughforEachTraversal for each class namepancelAdd one to each of the elementsClick event
  3. This event is triggered when it passes againforEachGo through and remove all of thempancelThe elements of theactiveClass name, and thenThe one that gets clicked pancelElement adds oneactiveThe name of the class.
const panels = document.querySelectorAll('.panel')

panels.forEach(panel= > {
    panel.addEventListener('click'.() = > {
        removeActiveClasses()
        panel.classList.add('active')})})function removeActiveClasses() {
    panels.forEach(panel= > {
        panel.classList.remove('active')})}Copy the code

❤️ thank you

If this article is helpful to you, please support it by clicking a “like”. Your “like” is my motivation for writing.

If you like this article, you can “like” + “favorites” + “forward” to more friends.