Home Rotate Font Awesome icon when a button is clicked and trigger accordion transition

Questions

Rotate Font Awesome icon when a button is clicked and trigger accordion transition

February 24, 2022

I’m part of the way to the solution but I’m stuck on getting the FA icon to rotate when the actual "disclosure" button is clicked. I also can’t seem to figure out where to place the transition property in order to get the disclosure content box to open smoothly similar to an accordion, such as this one:

https://www.w3schools.com/howto/howto_js_accordion.asp

But I think the transition isn’t working because the disclosure box content is set to display: none; until the button is clicked and the JS gets processed in order to display the box.

So I guess the desired reaction is: Click button -> FA Chevron rotates 90degrees to point down -> disclosure content-box opens with a smooth transition -> button gets clicked to close and the process reverses.

I’ve tried nesting the FA rotate in my hidden content-box JS because I noticed the "Active" state in Firefox’s inspector when the disclosure button is clicked but that doesn’t seem to make a difference. The code to rotate the icon works fine but only when the icon itself is clicked and not the actual disclosure button.

I tried to cheat my way around it by adding a transparent background to the FA icon and having it run behind the Disclosure button but of course, then the entire background rotates and not just the icon so that didn’t work out.

$(".discIconRotate").click(function() {
  $(this).toggleClass("iconDown");
})

var acc = document.getElementsByClassName("disclosureBtn");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");

    /* Toggle between hiding and showing the active panel */
    var disclosureContent = this.nextElementSibling;
    disclosureContent.classList.toggle("disclosureBlock");
    var disclosureBtn = this.nextElementSibling;
    disclosureBtn.classList.toggle("discIconRotate.iconDown");
  });
}

.specialContainer {
  display: flex;
  flex-direction: row;
  gap: 0.35em 0.35em;
  max-width: 1345px;
  flex-wrap: wrap;
  align-items: flex-start;
  background-color: transparent;
  margin: 0.35em auto 0em auto;
  padding: 0rem 0rem 0rem 0rem;
}

.specialContainer>div {
  background-color: #E7E6E6;
  position: relative;
  max-width: 1345px;
  text-align: center;
  outline: 1px solid black;
  float: left;
  width: calc(50% - 0.25em);
  height: auto;
  margin: 0em auto 0em auto;
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.6);
}

.disclosureContainer {
  display: block;
  width: 100%;
  height: auto;
  background-color: #E7E6E6;
  text-align: center;
  padding: 0em 0em 0em 0em;
  margin: 0em 0em 0em 0em;
}

.disclosureContent {
  font-family: Oswald Regular, Univers, Helvetica Neue, Helvetica, Arial;
  color: #646464;
  background: #E7E6E6;
  display: none;
  overflow: hidden;
  font-size: 0.6rem;
  line-height: 0.8rem;
  text-align: justify;
  font-weight: 400;
  text-justify: inter-word;
  margin: 0rem 0rem 0rem 0rem;
  padding: 0em 0.55em 0.1em 0.55em;
  transition: display 0.2s ease-out;
}

.disclosureBtn {
  background-color: transparent;
  border: none;
  border-collapse: collapse;
  width: 100%;
  height: 18px;
  display: block;
  margin: 0em auto 0em auto;
  padding: 0em 0em 0em 0em;
  cursor: pointer;
  text-decoration: none;
  transform: translateY(-5px);
}

.disclosureBtnTxt {
  font-family: Oswald Regular, Univers, Helvetica Neue, Helvetica, Arial;
  font-weight: 400;
  display: inline-block;
  color: #646464;
  padding: 0em 0em 0em 0em;
  margin: 0em auto 0em auto;
  text-align: center;
  text-decoration: none;
  font-size: 0.5rem;
  line-height: 0.8rem;
  letter-spacing: 0.01rem;
  cursor: pointer;
}

.fa-chevron-right {
  color: #646464;
  display: inline-block;
  font-size: 0.5rem;
  margin: 0rem 0rem 0rem 0rem;
  padding: 0rem 0rem 0rem 0rem;
  transition: 0.2s all;
}

.discIconRotate {
  transform-origin: center;
  -moz-transition: all 0.2s linear;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

.discIconRotate.iconDown {
  transform-origin: center;
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

.disclosureBlock {
  display: block;
}

<link rel=" stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer">

<div class="specialContainer">
  <div class="row">
    Offer Container 1
    <section class="disclosureContainer">
      <a class="disclosureBtn">
        <p class="disclosureBtnTxt"><i class="fa fa-chevron-right discIconRotate"></i>&nbsp;Disclosure</p>
      </a>
      <p class="disclosureContent">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
        in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
    </section>
  </div>
  <div class="row">
    Offer Container 2
    <section class="disclosureContainer">
      <a class="disclosureBtn">
        <p class="disclosureBtnTxt"><i class="fa fa-chevron-right discIconRotate"></i>&nbsp;Disclosure</p>
      </a>
      <p class="disclosureContent">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore m`agna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
    </section>
  </div>
  <div class="row">
    Offer Container 3
    <section class="disclosureContainer">
      <a class="disclosureBtn">
        <p class="disclosureBtnTxt"><i class="fa fa-chevron-right discIconRotate"></i>&nbsp;Disclosure</p>
      </a>
      <p class="disclosureContent">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
    </section>
  </div>
  <div class="row">
    Offer Container 4
    <section class="disclosureContainer">
      <a class="disclosureBtn">
        <p class="disclosureBtnTxt"><i class="fa fa-chevron-right discIconRotate"></i>&nbsp;Disclosure</p>
      </a>
      <p class="disclosureContent">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
    </section>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Here’s my jsfiddle: http://jsfiddle.net/astombaugh/7no5xzmr/98/

>Solution :

Just move your icon class toggle statement into the button click handler, and adjust your CSS accordingly. (It’s often easier to traverse the DOM with CSS than with JavaScript, but either would work.)

Other tips:

You don’t need those vendor prefixes unless you’re actually supporting ancient browsers. See https://caniuse.com/css-transitions.
You probably shouldn’t use paragraph elements to contain your buttons. That’s not paragraph content. I’ve replaced them with divs. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p.
You had mixed jQuery with raw JavaScript. I’d use one or the other. Either take advantage of jQuery across the board, or (better) work toward eliminating it if you don’t really need it. See https://youmightnotneedjquery.com.
Consider using const and let instead of var. They’re more modern and specific. See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const and https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let.
If you’re creating a constant or variable for just one use, consider substituting the value to reduce code.
Floats are a troublesome and outdated layout technique. They have few legitimate uses and should be avoided in favor of inline-block and flexbox strategies.

const acc = document.getElementsByClassName("disclosureBtn");
let i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    this.classList.toggle("iconDown");

    // Toggle between hiding and showing the active panel
    this.nextElementSibling.classList.toggle("disclosureBlock");
    this.nextElementSibling.classList.toggle("discIconRotate.iconDown");
  });
}

.specialContainer {
  display: flex;
  flex-direction: row;
  gap: 0.35em 0.35em;
  max-width: 1345px;
  flex-wrap: wrap;
  align-items: flex-start;
  background-color: transparent;
  margin: 0.35em auto 0em auto;
  padding: 0rem 0rem 0rem 0rem;
}

.specialContainer>div {
  background-color: #E7E6E6;
  position: relative;
  max-width: 1345px;
  text-align: center;
  outline: 1px solid black;
  float: left;
  width: calc(50% - 0.25em);
  height: auto;
  margin: 0em auto 0em auto;
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.6);
}

.disclosureContainer {
  display: block;
  width: 100%;
  height: auto;
  background-color: #E7E6E6;
  text-align: center;
  padding: 0em 0em 0em 0em;
  margin: 0em 0em 0em 0em;
}

.disclosureContent {
  font-family: Oswald Regular, Univers, Helvetica Neue, Helvetica, Arial;
  color: #646464;
  background: #E7E6E6;
  display: none;
  overflow: hidden;
  font-size: 0.6rem;
  line-height: 0.8rem;
  text-align: justify;
  font-weight: 400;
  text-justify: inter-word;
  margin: 0rem 0rem 0rem 0rem;
  padding: 0em 0.55em 0.1em 0.55em;
  transition: display 0.2s ease-out;
}

.disclosureBtn {
  background-color: transparent;
  border: none;
  border-collapse: collapse;
  width: 100%;
  height: 18px;
  display: block;
  margin: 0em auto 0em auto;
  padding: 0em 0em 0em 0em;
  cursor: pointer;
  text-decoration: none;
  transform: translateY(-5px);
}

.disclosureBtnTxt {
  font-family: Oswald Regular, Univers, Helvetica Neue, Helvetica, Arial;
  font-weight: 400;
  display: inline-block;
  color: #646464;
  padding: 0em 0em 0em 0em;
  margin: 0em auto 0em auto;
  text-align: center;
  text-decoration: none;
  font-size: 0.5rem;
  line-height: 0.8rem;
  letter-spacing: 0.01rem;
  cursor: pointer;
}

.fa-chevron-right {
  color: #646464;
  display: inline-block;
  font-size: 0.5rem;
  margin: 0rem 0rem 0rem 0rem;
  padding: 0rem 0rem 0rem 0rem;
  transition: 0.2s all;
}

.discIconRotate {
  transform-origin: center;
  transition: all 0.2s linear;
}

.iconDown .fa {
  transform-origin: center;
  transform: rotate(90deg);
}

.disclosureBlock {
  display: block;
}

<link rel=" stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer">

<div class="specialContainer">
  <div class="row">
    Offer Container 1
    <section class="disclosureContainer">
      <a class="disclosureBtn">
        <div class="disclosureBtnTxt"><i class="fa fa-chevron-right discIconRotate"></i>&nbsp;Disclosure</div>
      </a>
      
      <p class="disclosureContent">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
        in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
    </section>
  </div>
  
  <div class="row">
    Offer Container 2
    <section class="disclosureContainer">
      <a class="disclosureBtn">
        <div class="disclosureBtnTxt"><i class="fa fa-chevron-right discIconRotate"></i>&nbsp;Disclosure</div>
      </a>
      
      <p class="disclosureContent">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore m`agna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
    </section>
  </div>
  
  <div class="row">
    Offer Container 3
    <section class="disclosureContainer">
      <a class="disclosureBtn">
        <div class="disclosureBtnTxt"><i class="fa fa-chevron-right discIconRotate"></i>&nbsp;Disclosure</div>
      </a>
      
      <p class="disclosureContent">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
    </section>
  </div>
  
  <div class="row">
    Offer Container 4
    <section class="disclosureContainer">
      <a class="disclosureBtn">
        <div class="disclosureBtnTxt"><i class="fa fa-chevron-right discIconRotate"></i>&nbsp;Disclosure</div>
      </a>
      
      <p class="disclosureContent">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
    </section>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>