How to add :after and :before icon that change on click button dropdown?-CodePudding

With after and before I'm trying to change the dropdown icon when it is open or closed. So far I have not achieved any results, I am relatively new to all this and I do not understand how I can achieve the result, can someone help me please?

Actually I don't even know if that's the right way to do this.

var dropdownBtn = document.querySelectorAll('.drop_btn');
lastOpened = null; //Add this for toggling dropdown

dropdownBtn.forEach(btn => btn.addEventListener('click', function() {
  var dropCont = this.nextElementSibling;
  dropCont.classList.toggle("show");
  
  //Add this for toggling dropdown
  if (lastOpened && lastOpened !== dropCont)
      lastOpened.classList.remove("show");
      lastOpened = dropCont;
}));

.drop_btn {
  background: #e0e0e0;
  padding: 10px;
  margin: 5px 0px 0px 0px;
}

.drop_btn:before {
  font-family: fontAwesome;
  content: '\f077';
  float: right;
}

.drop_btn:after {
  font-family: fontAwesome;
  content: '\f078';
  float: right;
 }

.drop_btn:hover {
  background: #000;
  color: #fff;
}

.drop_container {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.2s ease-out;
}

.drop_container.show {
  max-height: 300px;
  transition: max-height 0.3s ease-in;
}

.drop_container > .item {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
  padding: 10px 0px 0px 0px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">

<div >

<div >One</div>
<div >
  <a  href="#">Contact Us</a>
  <a  href="#">Visit Us</a>
</div>

<div >Two</div>
<div >
  <a  href="#">Contact Us</a>
  <a  href="#">Visit Us</a>
</div>

</div>

CodePudding user response：

:before and :after aren't doing what you think they're doing in this case. https://developer.mozilla.org/en-US/docs/Web/CSS/::before

However, you can actually treat Fontawesome icons as classes and then toggle them the same way you're handling the menu. See: https://fontawesome.bootstrapcheatsheets.com/ find the icon you want, copy the HTML tag, and then add the class to your CSS(everything in the <i> minus the fa part) and then manipulate them as you would any other CSS element. Add the actual HTML tag wherever you want the icon.

var dropdownBtn = document.querySelectorAll('.drop_btn');
iconDrop = null;
lastOpened = null; //Add this for toggling dropdown

dropdownBtn.forEach(btn => btn.addEventListener('click', function() {
  var dropCont = this.nextElementSibling;
  let icon = this.querySelector('.fa-angle-up');
  icon.classList.toggle("down");
  dropCont.classList.toggle("show");

  //Add this for toggling dropdown
  if (lastOpened && lastOpened !== dropCont)
    lastOpened.classList.remove("show");
  lastOpened = dropCont;

  if (iconDrop && iconDrop !== icon)
    iconDrop.classList.remove("down");
  iconDrop = icon;
}));

.drop_btn {
  background: #e0e0e0;
  padding: 10px;
  margin: 5px 0px 0px 0px;
}

.fa-angle-up {
  display: inline-block;
  position: absolute;
  right: 2em;
  margin: 0;
  padding: 0;
  transform: rotateY(0);
  transform-origin: center;
  transition: 0.3s linear;
}

.fa-angle-up.down {
  display: inline-block;
  position: absolute;
  right: 2em;
  margin: 0;
  padding: 0;
  transform: rotateZ(-180deg);
  transform-origin: center;
  transition: 0.3s linear;
}

.drop_btn:hover {
  background: #000;
  color: #fff;
}

.drop_container {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.2s ease-out;
}

.drop_container.show {
  max-height: 300px;
  transition: max-height 0.3s ease-in;
}

.drop_container>.item {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
  padding: 10px 0px 0px 0px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">

<div >

  <div >One<i ></i></div>
  <div >
    <a  href="#">Contact Us</a>
    <a  href="#">Visit Us</a>
  </div>

  <div >Two<i ></i></div>
  <div >
    <a  href="#">Contact Us</a>
    <a  href="#">Visit Us</a>
  </div>

</div>