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

Time:02-25

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 >
  <div >
    Offer Container 1
    <section >
      <a >
        <p ><i ></i>&nbsp;Disclosure</p>
      </a>
      <p >
        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 >
    Offer Container 2
    <section >
      <a >
        <p ><i ></i>&nbsp;Disclosure</p>
      </a>
      <p >
        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 >
    Offer Container 3
    <section >
      <a >
        <p ><i ></i>&nbsp;Disclosure</p>
      </a>
      <p >
        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 >
    Offer Container 4
    <section >
      <a >
        <p ><i ></i>&nbsp;Disclosure</p>
      </a>
      <p >
        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/

CodePudding user response:

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.)

As far as the text transition, I've implemented a simple max-height/opacity solution, but that may not accommodate widely-variable content height. See How can I transition height: 0; to height: auto; using CSS? for more options.

Other tips:

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 .row {
  background-color: #E7E6E6;
  position: relative;
  max-width: 1345px;
  text-align: center;
  outline: 1px solid black;
  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;
  max-height: 0;
  opacity: 0;
  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: all 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 {
  max-height: 100px;
  opacity: 1;
}
<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 >
  <div >
    Offer Container 1
    <section >
      <a >
        <div ><i ></i>&nbsp;Disclosure</div>
      </a>
      
      <p >
        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 >
    Offer Container 2
    <section >
      <a >
        <div ><i ></i>&nbsp;Disclosure</div>
      </a>
      
      <p >
        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 >
    Offer Container 3
    <section >
      <a >
        <div ><i ></i>&nbsp;Disclosure</div>
      </a>
      
      <p >
        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 >
    Offer Container 4
    <section >
      <a >
        <div ><i ></i>&nbsp;Disclosure</div>
      </a>
      
      <p >
        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>

CodePudding user response:

one way would be to change the fa-chevron-right class to fa-chevron-down when it is displayed.

if not, you could also add a class that does a transform: rotate(90deg); to change the position of the icon.

  • Related