Click on a div to switch between displaying an arrow pointing to the right and an arrow

Currently working on a design for an accordion-style layout and looking to implement toggling arrow icons when the div is clicked. I have managed to toggle the content of the div successfully, but now seeking assistance in achieving the same functionality with the arrow icons.

Here's what I have attempted thus far:

$(document).ready(function() {
  $(this).on("click", ".koh-faq-question", function() {
    $(this).parent().find(".koh-faq-answer").toggle();
  });
});
.koh-faqs-page-title {
  font-family: Nexa W01 Heavy;
  font-size: 30px;
  color: #04202E;
  font-weight: 700;
}

.koh-faq-question-span {
  font-family: Helvetica Neue LT Pro Roman !important;
  font-size: 16px !important;
  color: #000 !important;
  font-weight: 700 !important;
  display: inline-block;
}

.koh-faq-answer {
  font-family: Helvetica Neue LT Pro Roman;
  color: #000;
  font-weight: 400;
  display: none;
}

.icon {
  font-size: 10px;
  padding-right: 5px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="koh-tab-content">
  <div class="koh-tab-content-body">
    <div class="koh-faq">
      <div class="koh-faq-question">
        <i class="fa fa-chevron-right" aria-hidden="true"></i>
        <span class="koh-faq-question-span"> Test Question 1 </span>
      </div>
      <div class="koh-faq-answer">
        Test Answer 1
      </div>
    </div>
  </div>
</div>

Seeking guidance on how to update the right icon to toggle to a down icon upon clicking the question. Additionally, we also need it to toggle back to the left icon upon subsequent clicks. Given that this is an FAQ page with multiple questions and answers, needing a solution that can be applied to each one individually.

javascriptjqueryhtmlcss

Answer №1

To create a rotating icon with animation, you can toggle the active class on the .fa element.

$(document).ready(function() {
  $(this).on("click", ".koh-faq-question", function() {
    $(this).parent().find(".koh-faq-answer").toggle();
    $(this).find(".fa").toggleClass('active');
  });
});
.koh-faqs-page-title {
  font-family: Nexa W01 Heavy;
  font-size: 30px;
  color: #04202E;
  font-weight: 700;
}

.koh-faq-question-span {
  font-family: Helvetica Neue LT Pro Roman !important;
  font-size: 16px !important;
  color: #000 !important;
  font-weight: 700 !important;
  display: inline-block;
}

.koh-faq-answer {
  font-family: Helvetica Neue LT Pro Roman;
  color: #000;
  font-weight: 400;
  display: none;
}

.icon {
  font-size: 10px;
  padding-right: 5px;
}

.fa {
  transition: transform .2s;
}

.fa.active {
  transform: rotateZ(90deg);
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="koh-tab-content">
  <div class="koh-tab-content-body">
    <div class="koh-faq">
      <div class="koh-faq-question">
        <i class="fa fa-chevron-right" aria-hidden="true"></i>
        <span class="koh-faq-question-span"> Test Question 1 </span>
      </div>
      <div class="koh-faq-answer">
        Test Answer 1
      </div>
    </div>
  </div>
</div>

Answer №2

To switch the arrow direction from right to down, simply change the class from fa-chevron-right to fa-chevron-down. I have included this line of code: 

$('#chevron').toggleClass( "fa-chevron-right" ).toggleClass( "fa-chevron-down" );
for toggling the classes on the element with the chevron id.

$(document).ready(function() {
  $(this).on("click", ".koh-faq-question", function() {
    $('#chevron').toggleClass( "fa-chevron-right" ).toggleClass( "fa-chevron-down" );
    $(this).parent().find(".koh-faq-answer").toggle();
  });
});
.koh-faqs-page-title {
  font-family: Nexa W01 Heavy;
  font-size: 30px;
  color: #04202E;
  font-weight: 700;
}

.koh-faq-question-span {
  font-family: Helvetica Neue LT Pro Roman !important;
  font-size: 16px !important;
  color: #000 !important;
  font-weight: 700 !important;
  display: inline-block;
}

.koh-faq-answer {
  font-family: Helvetica Neue LT Pro Roman;
  color: #000;
  font-weight: 400;
  display: none;
}

.icon {
  font-size: 10px;
  padding-right: 5px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="koh-tab-content">
  <div class="koh-tab-content-body">
    <div class="koh-faq">
      <div class="koh-faq-question">
        <i class="fa fa-chevron-right" id="chevron" aria-hidden="true"></i>
        <span class="koh-faq-question-span"> Test Question 1 </span>
      </div>
      <div class="koh-faq-answer">
        Test Answer 1
      </div>
    </div>
  </div>
</div>

Answer №3

    $(document).ready(function() {
      $(this).on("click", ".faq-question-click", function() {
        $(this).parent().find(".faq-answer-toggle").toggle();
        $(this).find('i').toggleClass('fa-chevron-right fa-chevron-down');
      });
    });
    .faq-page-title {
      font-family: Nexa W01 Heavy;
      font-size: 30px;
      color: #04202E;
      font-weight: 700;
    }

    .faq-question-span {
      font-family: Helvetica Neue LT Pro Roman !important;
      font-size: 16px !important;
      color: #000 !important;
      font-weight: 700 !important;
      display: inline-block;
    }

    .faq-answer {
      font-family: Helvetica Neue LT Pro Roman;
      color: #000;
      font-weight: 400;
      display: none;
    }

    .icon {
      font-size: 10px;
      padding-right: 5px;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <div class="faq-tab-content">
      <div class="faq-tab-body">
        <div class="faq-section">
          <div class="faq-question-click">
            <i class="fa fa-chevron-right" aria-hidden="true"></i>
            <span class="faq-question-span"> Unique Question 1 </span>
          </div>
          <div class="faq-answer-toggle">
            Unique Answer 1
          </div>
        </div>
      </div>
    </div>

Answer №4

$(document).ready(function() {
  $(this).on("click", ".faq-question", function() {
    $(this).parent().find(".faq-answer").toggle();
    $(".icon-chevron-right").toggleClass("icon-chevron-down");
  });
});
.faqs-page-title {
  font-family: Roboto Slab;
  font-size: 28px;
  color: #1A2933;
  font-weight: 600;
}

.faq-question-span {
  font-family: Arial Black !important;
  font-size: 14px !important;
  color: #111 !important;
  font-weight: 800 !important;
  display: inline-block;
}

.faq-answer {
  font-family: Arial Black;
  color: #111;
  font-weight: 300;
  display: none;
}

.icon-arrow {
  font-size: 12px;
  padding-right: 4px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tab-content">
  <div class="tab-body">
    <div class="faq-section">
      <div class="faq-question">
        <i class="icon icon-chevron-right" aria-hidden="true"></i>
        <span class="faq-question-span"> New Question One </span>
      </div>
      <div class="faq-answer">
        Answer to the New Question One
      </div>
    </div>
  </div>
</div>

Answer №5

While the answers provided are all effective, I recommend utilizing a single CSS state class for styling to ensure consistency and ease of application across various projects. It is important to generalize styles as much as possible, especially for common components like accordions.

You can follow the BEM standard if you choose to, but it's not mandatory ->

The steps to achieve this are as follows:

  1. Create a wrapper for each accordion item with defined text and toggle button

  2. Use one class name like 'active' or 'open' to style (show/hide, rotate, etc.) text and toggle button within that class, such as: 

    .accordion-item.active .toggle-btn {
                                 your styles here
                               }

  3. With JavaScript, add and remove the toggle class on the parent element (.accordion-item) when clicking on the toggle button.

For a complete working example, refer to this CodePen -> https://codepen.io/nikolamitic/pen/PEqqZa

HTML

  <li class="accordion-item">
    <div class="accordition-item__heading">
      <h3 class="accordition-item__title">Nikola is awesome</h3>
      <i class="accordion-item__btn"></i>
    </div>
    <div class="accordion-item__paragraph">
      <p>
        Random text goes here about how amazing we all are and should continue to be.
      </p>
    </div>
  </li>

  <li class="accordion-item">
    <div class="accordition-item__heading">
      <h3 class="accordition-item__title">Nikola is awesome</h3>
      <i class="accordion-item__btn"></i>
    </div>
    <div class="accordion-item__paragraph">
      <p>
        Random text goes here about how amazing we all are and should continue to be.
      </p>
    </div>
  </li>

  <li class="accordion-item">
    <div class="accordition-item__heading">
      <h3 class="accordition-item__title">Nikola is awesome</h3>
      <i class="accordion-item__btn"></i>
    </div>
    <div class="accordion-item__paragraph">
      <p>
        Random text goes here about how amazing we all are and should continue to be.
      </p>
    </div>
  </li>

  <li class="accordion-item">
    <div class="accordition-item__heading">
      <h3 class="accordition-item__title">Nikola is awesome</h3>
      <i class="accordion-item__btn"></i>
    </div>
    <div class="accordion-item__paragraph">
      <p>
        Random text goes here about how amazing we all are and should continue to be.
      </p>
    </div>
  </li>

</ul>

CSS

// default states
.accordion-item {
  &__paragraph {
    display: none;
  }
  &__btn {
    background-image: url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-plus-round-128.png');
    // You can use any other property instead of bg image.
  }
}

// active states
.accordion-item--active {
  .accordion-item__paragraph {
    display: block;
  }
  .accordion-item__btn {
    background-image: url('http://cdn.onlinewebfonts.com/svg/img_161345.png');
  }
    // Any other CSS properties can be applied instead of bg image.

}





// Example related styles - skipping for brevity

JS

const $accordionBtn = $('.accordion-item__btn');

$accordionBtn.on('click', (event) => {
  const $clickedAccordionItem = $(event.currentTarget).parents('.accordion-item');
  $clickedAccordionItem.toggleClass('accordion-item--active');
});

// Utilizing only one modifier class ensures consistency and simplifies styling through CSS with minimal nesting levels, following BEM principles.

Answer №6

Ha ha, I find simplicity in using the <details> tag:

<details>
  <summary>Sample Question A</summary>
  <p>Sample Answer A</p>
</details>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unselecting a span in AngularJS: Switching selection to another span

Whenever I click on an item from my list displayed using ngrepeat, it generates another list specific to the selected element. My goal is to change the background color of the clicked element to indicate it has been selected. However, the problem arises wh ...

javascripthtmlcssangularjs

The Ajax loading panel functions properly on Firefox, but it seems to be ineffective on Chrome. Does anyone have any insights into the reason

Recently, I came across a helpful ajax loading panel at Here is the code snippet that I have been using: jQuery('#map').showLoading(); var request = OpenLayers.Request.POST({ url: "service.asmx/DeleteStopPoint", data: "{'TripId&ap ...

jqueryajaxcross-browser

Sending a JavaScript variable with jQuery Ajax

<select id="selectmaterial" class="textbox" size="12" name="materials" style="width:250px" multiple> <?php if($materials!=null&&$mater ...

jqueryajax

How can I modify my code to ensure that trs and th elements are not selected if their display property is set to none?

I am currently working on creating a filter for my pivot table, but I am unsure of how to dynamically calculate the sum of each row/column based on whether they are displayed or not. If you need any other part of my code, feel free to ask. To hide employee ...

javascripthtmlhtml-table

Node.js can be used to easily set the values of HTML elements

After successfully setting up a node.js connection to my mysql database and being able to retrieve and input data using connection.query(), I now want to display the database information on my HTML elements. Is there an equivalent of getElementById for t ...

javascriptmysqlnode.jsexpress

Instructions on triggering a pop-up modal from a separate HTML document to the index page

I am trying to open a form in a Modal using a button. However, the Modal is located in a separate .html file. How can I use JavaScript to call the form from that external html file into my index.html file? Currently, I am able to call the Modal within the ...

javascriptphphtmlcssbootstrap-modal

Best method for transferring Entity details to a jquery dialog box within ASP.NET MVC 3

I am currently working on an ASP.NET MVC 3 Page where I need to loop through a collection of objects in the Model. Each object will have a button next to its information for users to edit it in a jQuery UI dialog. However, I am facing a dilemma in finding ...

jqueryasp.net-mvcjsonjquery-uijquery-dialog

PHP Newsletter Creator

Recently, I created a unique php newsletter script in CakePHP that allows users to utilize an in-place editor to generate HTML content for newsletters. While the functionality works well, I have encountered some challenges with a new newsletter design that ...

phphtmlcakephpgdnewsletter

Retrieve the information from a website and display it on the current webpage using an ajax request

Is there a way to insert parsed HTML content into my webpage using just a link from another page? I'm attempting to use an AJAX call, but I keep receiving an error. Below is the code I've written, and the browser doesn't seem to be the issue ...

javascriptjqueryhtmlajax

Utilizing the "return" keyword in Javascript outside of function declarations

Exploring the Impact of Using the Return Keyword in JavaScript Scripts Beyond Functions in Browsers and Node.js Recently, I experimented with utilizing the return keyword in a Node.js script like so: #!/usr/bin/env node return 10; My initial assumption ...

javascriptnode.jsbrowserecmascript-6

Having trouble displaying all 6 columns in the Bootstrap carousel - only 3 columns are showing up

I came across this inspiring Codepen and decided to tweak it to support Bootstrap's col-md-2 class. Despite my efforts, only 3 columns are showing up. I suspect that neighboring cards of the active card receive additional classes for display purposes ...

jquerybootstrap-4

The issue at hand is why the closure is not functioning properly when variables are assigned to the callback of the getCurrentLocation function

Apologies for the extensive amount of code, but it seems like there may be an issue with AppMobi's getCurrentLocation function in this scenario. The problem arises when tapping on list elements triggers an asynchronous getCurrentLocation call which up ...

javascriptgeolocationclosuresappmobi

When you choose the File->Print option, the PDF contents are seamlessly printed within the document

My web page has an embedded PDF file within the content. <h3>Foo</h3> <object id="foo" data="bigboundingbox.pdf" type="application/pdf" classid="clsid:CA8A9780-280D-11CF-A24D-444553540000"> </object> When viewed in Interne ...

htmlinternet-explorerpdfwebprinting

When utilizing var_dump in PHP, the SQL query may return an empty array with an output of array(0

I am puzzled as to why my Query is not retrieving any data, despite its title My JQuery: $(".output").click(function() { var noteid = $(this).data("noteid"); $("#right-box").load("connectionDetails.php", { noteid: noteid }); }); My connectionDet ...

phpjquerymysqlsqlajax

What is the best way to load specific CSS in an rhtml file?

In the world of website development, we often find several pages that are generated from the same layout.rhtml file. Along with a global css file, each page may also have its own unique css file - such as page1.css for page1.rhtml and page2.css for page2.r ...

cssruby-on-railsruby

Transmitting an array within the POST request payload

My goal is to send an array to my Node/MongoDB server using an AJAX POST request, along with other variables in the body. Check out the client side JS code below: function setupForm(){ $("#add").submit(function(event) { event.preventDefault() ...

javascriptarraysajaxmongodbexpress

Stop unwanted scrolling upwards by using jQuery ajax function $.load

I'm currently in the process of creating an ajax chat using jquery and php. Everything seems to be running smoothly except for one issue related to scrolling. Essentially, I've implemented a time-out function that automatically reloads the inner ...

javascriptphpjquerycssajax

Tips for displaying a tooltip when hovering over a label in a Material UI slider

I'm currently working on a slider quiz and my goal is to have the tooltip appear when hovering over the label on the slider. Currently, I can only see the tooltip when I hover directly on the thumb at the location of my mouse. Refer to the image belo ...

javascriptreactjsmaterial-uislider

Nextjs introduces an innovative "OnThisDay" functionality, leveraging getServerSideProps and Date.now() to provide real-time information

I am currently working on adding an "OnThisDay" feature in my Nextjs project, inspired by Wikipedia's style of displaying events that happened on a specific date. To achieve this, I have implemented a function structured like the following code snippe ...

javascriptnode.jsreactjstypescriptnext.js

Creating a design that resembles boxes for the div elements while ensuring the grid layout remains undisturbed

Hey there! I'm new to using Bootstrap and I'm trying to create boxes that look like the ones on the right side of this page: Unfortunately, I haven't had much luck so far. I tried using padding, but it messed up my grid system. I assigned a ...

htmlcsstwitter-bootstrap