Hide multipal element using js but only first element is working proper-CodePudding

my box 1 is working proper but 2nd & 3rd box is not working proper on click i do not change id manually you can change use js .......................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................

function avmyFunction() {
  var x = document.getElementById("av-h");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

* {
  padding: 0;
  margin: 0;
  scrollbar-width: none;
}
.av-box {
  width: 100%;
}
.av-ubox {
  display: flex;
  width: 80%;
  margin: 2.5px auto;
}
.av-fbox {
  display: flex;
  border-radius: 25px;
  position: relative;
  overflow: hidden;
  margin: 5px;
  justify-content: center;
}
.av-hboxl {
  display: flex;
  border-radius: 25px;
  position: relative;
  overflow: hidden;
  width: 50%;
  left: 0px;
  margin: 5px;
}.av-hboxr {
  display: flex;
  border-radius: 25px;
  position: relative;
  overflow: hidden;
  width: 50%;
  right: 0px;
  margin: 5px;
}
img {
  width: 100%;
}
.av-btn {
  position: absolute;
  width: 50px;
  bottom: 10px;
  right: 10px;
  height: 50px;
  border-radius: 25px;
  border-style: none;
  content: "\274C";
}
#av-icona {
  display: none;
}
@media only screen and (min-width: 600px) {
    .av-ubox {
   max-width: 1439px;
  }
}
.av-title {
  position: absolute;
  text-align: center;
}
.av-title-h {
  position: absolute;
  text-align: center;
  width: 100%;
  padding: 0 20%;
  height: 100%;
  background-color: #e9b9b9;
}
.av-title-h p {
  padding-top: 10px;
  font-size: 24px;
  top: center;
  
}
@media only screen and (max-width: 600px) {
  .av-hboxl {
  width: 100%;
  }
  .av-hboxr {
  width: 100%;
  }
  .av-ubox {
  display: block;
  width: 98%;
  margin: 1% 0%;
  }
  .av-title-h {
    width: 100%;
    padding: 0 8%;
    height: 100%;
  }
  .av-title- {
    width: 90%
  }
.av-title-h p {
  font-size: 20px;
  padding-top: 10px;
}
  .av-span {
    display: block;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
    <script src="ID.js"></script>
</head>

<body>
 <div class="av-box">
     <div class="av-ubox">
        <div class="av-fbox">
            <img src="https://images.unsplash.com/photo-1476958526483-36efcaa80b1b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q" alt="">
            <div class="av-title">
                <h3>Move to iOS app</h3>
                <h2><span class="av-span">Transfer your photos and</span><span class="av-span">Transfer your photos and</span></h2>
            </div>
            <div class="av-title-h" id="av-h">
                <h3>Move to iOS app</h3>
                <p>Start by downloading the Move to iOS app on your Android phone. It securely transfers the stuff you care about most — your contacts, messages, photos, videos, email accounts and calendars — from your Android phone to your iPhone.</p>
              <a href=""><p>Learn more about the Move to iOS app</p></a>
            </div>
            <button class="av-btn" onclick="avmyFunction()"><span id="av-icona">&#x2716;</span><span id="av-iconb">&#43;</span></button>
        </div>
     </div>
     <div class="av-ubox">
        <div class="av-hboxl">
            <img src="https://images.unsplash.com/photo-1476958526483-36efcaa80b1b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q" alt="">
            <div class="av-title">
                <h3>Move to iOS app</h3>
                <h2><span class="av-span">Transfer your photos and</span><span class="av-span">Transfer your photos and</span></h2>
            </div>
            <div class="av-title-h" id="av-h">
                <h3>Move to iOS app</h3>
                <P>Start by downloading the Move to iOS app on your Android phone. It securely transfers the stuff you care about most — your contacts, messages, photos, videos, email accounts and calendars — from your Android phone to your iPhone.</P>
              <a href=""><P>Learn more about the Move to iOS app</P></a>
            </div>
            <button class="av-btn" onclick="avmyFunction()"><span id="av-icona">&#x2716;</span><span id="av-iconb">&#43;</span></button>
        </div>
        <div class="av-hboxr">
            <img src="https://images.unsplash.com/photo-1476958526483-36efcaa80b1b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q" alt="">
            <div class="av-title">
                <h3>Move to iOS app</h3>
                <h2><span class="av-span">Transfer your photos and</span><span class="av-span">Transfer your photos and</span></h2>
            </div>
            <div class="av-title-h" id="av-h">
                <h3>Move to iOS app</h3>
                <P>Start by downloading the Move to iOS app on your Android phone. It securely transfers the stuff you care about most — your contacts, messages, photos, videos, email accounts and calendars — from your Android phone to your iPhone.</P>
              <a href=""><P>Learn more about the Move to iOS app</P></a>
            </div>
            <button class="av-btn" onclick="avmyFunction()"><span id="av-icona">&#x2716;</span><span id="av-iconb">&#43;</span></button>
        </div>
     </div>
 </div>
</body>

CodePudding user response：

Using same id's for different elements are anti-pattern/wrong. Just give them different id's and pass them to avmyFunction.

function avmyFunction(id) {
  var x = document.getElementById(id);
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

* {
  padding: 0;
  margin: 0;
  scrollbar-width: none;
}

.av-box {
  width: 100%;
}

.av-ubox {
  display: flex;
  width: 80%;
  margin: 2.5px auto;
}

.av-fbox {
  display: flex;
  border-radius: 25px;
  position: relative;
  overflow: hidden;
  margin: 5px;
  justify-content: center;
}

.av-hboxl {
  display: flex;
  border-radius: 25px;
  position: relative;
  overflow: hidden;
  width: 50%;
  left: 0px;
  margin: 5px;
}

.av-hboxr {
  display: flex;
  border-radius: 25px;
  position: relative;
  overflow: hidden;
  width: 50%;
  right: 0px;
  margin: 5px;
}

img {
  width: 100%;
}

.av-btn {
  position: absolute;
  width: 50px;
  bottom: 10px;
  right: 10px;
  height: 50px;
  border-radius: 25px;
  border-style: none;
  content: "\274C";
}

#av-icona {
  display: none;
}

@media only screen and (min-width: 600px) {
  .av-ubox {
    max-width: 1439px;
  }
}

.av-title {
  position: absolute;
  text-align: center;
}

.av-title-h {
  position: absolute;
  text-align: center;
  width: 100%;
  padding: 0 20%;
  height: 100%;
  background-color: #e9b9b9;
}

.av-title-h p {
  padding-top: 10px;
  font-size: 24px;
  top: center;
}

@media only screen and (max-width: 600px) {
  .av-hboxl {
    width: 100%;
  }
  .av-hboxr {
    width: 100%;
  }
  .av-ubox {
    display: block;
    width: 98%;
    margin: 1% 0%;
  }
  .av-title-h {
    width: 100%;
    padding: 0 8%;
    height: 100%;
  }
  .av-title- {
    width: 90%
  }
  .av-title-h p {
    font-size: 20px;
    padding-top: 10px;
  }
  .av-span {
    display: block;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
  <script src="ID.js"></script>
  <title>casemurk</title>
</head>

<body>
  <div class="av-box">
    <div class="av-ubox">
      <div class="av-fbox">
        <img src="https://images.unsplash.com/photo-1476958526483-36efcaa80b1b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q" alt="">
        <div class="av-title">
          <h3>Move to iOS app</h3>
          <h2><span class="av-span">Transfer your photos and</span><span class="av-span">Transfer your photos and</span></h2>
        </div>
        <div class="av-title-h" id="av-h1">
          <h3>Move to iOS app</h3>
          <p>Start by downloading the Move to iOS app on your Android phone. It securely transfers the stuff you care about most — your contacts, messages, photos, videos, email accounts and calendars — from your Android phone to your iPhone.</p>
          <a href="">
            <p>Learn more about the Move to iOS app</p>
          </a>
        </div>
        <button class="av-btn" onclick="avmyFunction('av-h1')"><span id="av-icona">&#x2716;</span><span id="av-iconb">&#43;</span></button>
      </div>
    </div>
    <div class="av-ubox">
      <div class="av-hboxl">
        <img src="https://images.unsplash.com/photo-1476958526483-36efcaa80b1b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q" alt="">
        <div class="av-title">
          <h3>Move to iOS app</h3>
          <h2><span class="av-span">Transfer your photos and</span><span class="av-span">Transfer your photos and</span></h2>
        </div>
        <div class="av-title-h" id="av-h2">
          <h3>Move to iOS app</h3>
          <P>Start by downloading the Move to iOS app on your Android phone. It securely transfers the stuff you care about most — your contacts, messages, photos, videos, email accounts and calendars — from your Android phone to your iPhone.</P>
          <a href="">
            <P>Learn more about the Move to iOS app</P>
          </a>
        </div>
        <button class="av-btn" onclick="avmyFunction('av-h2')"><span id="av-icona">&#x2716;</span><span id="av-iconb">&#43;</span></button>
      </div>
      <div class="av-hboxr">
        <img src="https://images.unsplash.com/photo-1476958526483-36efcaa80b1b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q" alt="">
        <div class="av-title">
          <h3>Move to iOS app</h3>
          <h2><span class="av-span">Transfer your photos and</span><span class="av-span">Transfer your photos and</span></h2>
        </div>
        <div class="av-title-h" id="av-h3">
          <h3>Move to iOS app</h3>
          <P>Start by downloading the Move to iOS app on your Android phone. It securely transfers the stuff you care about most — your contacts, messages, photos, videos, email accounts and calendars — from your Android phone to your iPhone.</P>
          <a href="">
            <P>Learn more about the Move to iOS app</P>
          </a>
        </div>
        <button class="av-btn" onclick="avmyFunction('av-h3')"><span id="av-icona">&#x2716;</span><span id="av-iconb">&#43;</span></button>
      </div>
    </div>
  </div>
</body>

CodePudding user response：

thanks Erenn but i wan't like this

var acc = document.getElementsByClassName("av-btn");
var i;

for (i = 0; i < acc.length; i  ) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.previousElementSibling;
    if (panel.style.display === "none") {
      panel.style.display = "block";
    } else {
      panel.style.display = "none";
    }
  });
}

* {
  padding: 0;
  margin: 0;
  scrollbar-width: none;
}
.av-box {
  width: 100%;
}
.av-ubox {
  display: flex;
  width: 80%;
  margin: 2.5px auto;
}
.av-fbox {
  display: flex;
  border-radius: 25px;
  position: relative;
  overflow: hidden;
  margin: 5px;
  justify-content: center;
}
.av-hboxl {
  display: flex;
  border-radius: 25px;
  position: relative;
  overflow: hidden;
  width: 50%;
  left: 0px;
  margin: 5px;
}.av-hboxr {
  display: flex;
  border-radius: 25px;
  position: relative;
  overflow: hidden;
  width: 50%;
  right: 0px;
  margin: 5px;
}
img {
  width: 100%;
}
.av-btn {
  position: absolute;
  width: 50px;
  bottom: 10px;
  right: 10px;
  height: 50px;
  border-radius: 25px;
  border-style: none;
  content: "\274C";
}
#av-icona {
  display: none;
}
@media only screen and (min-width: 600px) {
    .av-ubox {
   max-width: 1439px;
  }
}
.av-title {
  position: absolute;
  text-align: center;
}
.av-title-h {
  position: absolute;
  text-align: center;
  width: 100%;
  padding: 0 20%;
  height: 100%;
  background-color: #e9b9b9;
}
.av-title-h p {
  padding-top: 10px;
  font-size: 24px;
  top: center;
  
}
@media only screen and (max-width: 600px) {
  .av-hboxl {
  width: 100%;
  }
  .av-hboxr {
  width: 100%;
  }
  .av-ubox {
  display: block;
  width: 98%;
  margin: 1% 0%;
  }
  .av-title-h {
    width: 100%;
    padding: 0 8%;
    height: 100%;
  }
  .av-title- {
    width: 90%
  }
.av-title-h p {
  font-size: 20px;
  padding-top: 10px;
}
  .av-span {
    display: block;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
</head>

<body>
 <div class="av-box">
     <div class="av-ubox">
        <div class="av-fbox">
            <img src="https://images.unsplash.com/photo-1476958526483-36efcaa80b1b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q" alt="">
            <div class="av-title">
                <h3>Move to iOS app</h3>
                <h2><span class="av-span">Transfer your photos and</span><span class="av-span">Transfer your photos and</span></h2>
            </div>
            <div class="av-title-h" id="av-h">
                <h3>Move to iOS app</h3>
                <p>Start by downloading the Move to iOS app on your Android phone. It securely transfers the stuff you care about most — your contacts, messages, photos, videos, email accounts and calendars — from your Android phone to your iPhone.</p>
              <a href=""><p>Learn more about the Move to iOS app</p></a>
            </div>
            <button class="av-btn"><span id="av-icona">&#x2716;</span><span id="av-iconb">&#43;</span></button>
        </div>
     </div>
     <div class="av-ubox">
        <div class="av-hboxl">
            <img src="https://images.unsplash.com/photo-1476958526483-36efcaa80b1b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q" alt="">
            <div class="av-title">
                <h3>Move to iOS app</h3>
                <h2><span class="av-span">Transfer your photos and</span><span class="av-span">Transfer your photos and</span></h2>
            </div>
            <div class="av-title-h" id="av-h">
                <h3>Move to iOS app</h3>
                <P>Start by downloading the Move to iOS app on your Android phone. It securely transfers the stuff you care about most — your contacts, messages, photos, videos, email accounts and calendars — from your Android phone to your iPhone.</P>
              <a href=""><P>Learn more about the Move to iOS app</P></a>
            </div>
            <button class="av-btn"><span id="av-icona">&#x2716;</span><span id="av-iconb">&#43;</span></button>
        </div>
        <div class="av-hboxr">
            <img src="https://images.unsplash.com/photo-1476958526483-36efcaa80b1b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q" alt="">
            <div class="av-title">
                <h3>Move to iOS app</h3>
                <h2><span class="av-span">Transfer your photos and</span><span class="av-span">Transfer your photos and</span></h2>
            </div>
            <div class="av-title-h" id="av-h">
                <h3>Move to iOS app</h3>
                <P>Start by downloading the Move to iOS app on your Android phone. It securely transfers the stuff you care about most — your contacts, messages, photos, videos, email accounts and calendars — from your Android phone to your iPhone.</P>
              <a href=""><P>Learn more about the Move to iOS app</P></a>
            </div>
            <button class="av-btn"><span id="av-icona">&#x2716;</span><span id="av-iconb">&#43;</span></button>
        </div>
     </div>
 </div>
</body>