Adjust the text in Bootstrap to collapse on command

I'm currently utilizing Bootstrap collapse in my project. I am attempting to implement a basic jQuery script that changes an icon once a user clicks on one of the collapses. Since there are multiple collapses on the page, I believe I need to use the "this" statement in my code.

Below is the HTML snippet:

<a data-toggle="collapse" href="#y2012" aria-expanded="false" aria-controls="y2012">
  <i class="fa fa-caret-right"></i> 2012
</a><br />
<div class="collapse" id="y2012">
  text
</div>
<a data-toggle="collapse" href="#y2013" aria-expanded="false" aria-controls="y2013">
  <i class="fa fa-caret-right"></i> 2013
</a><br />
<div class="collapse" id="y2013">
  text
</div>

Here is the current state of my JavaScript:

$(".collapse").hasClass("in") ? true : (function(){
    $("a i").removeClass('fa-caret-right');
    $("a i").addClass('fa-caret-down');
}, function () {
    $("a i").removeClass('fa-caret-down');
    $("a i").addClass('fa-caret-right');
});

---------------UPDATED---------------- I've made some progress and updated my JavaScript to this:

$('.collapsible').click(function () {
    var $this = $(this);
    $this.toggleClass('collapsible');
    if ($this.hasClass('collapsible')) {
        $this.children("i").removeClass('fa-caret-right');
        $this.children("i").addClass('fa-caret-down');
    } else {
        $this.children("i").addClass('fa-caret-right');
        $this.children("i").removeClass('fa-caret-down');
    }
});

I have added the class "collapsible" to the anchor tag like so:

<a data-toggle="collapse" href="#y2012" aria-expanded="false" aria-controls="y2012" class="collapsible">
    <i class="fa fa-caret-right"></i> 2012
  </a><br />

While it somewhat works now, the issue is that upon first click on the anchor tag, the function does not trigger. It only starts working after clicking again, which goes against the intended behavior I initially wanted.

Answer №1

$(".expand").click(function(){
  $(this).hasClass("open")?true : (function(){
      $(this).children("i").removeClass('fa-caret-right');
      $(this).children("i").addClass('fa-caret-down');
  }, function () {
      $(this).children("i").removeClass('fa-caret-down');
      $(this).children("i").addClass('fa-caret-right');
  });
});

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

Passing form data to a different route using express

I need to send the data from this form, located on the index.ejs page, to another page "/rentingForm" for rendering at the "rentingForm" page. Here is the snippet of code from my app.js file: app.use(bodyParser.urlencoded({ extended: true })); app.use( bo ...

Leverage the power of Angular by configuring a custom webpack setup to

Implementing the CSS modules concept in my Angular app has been a challenge due to conflicts with existing frontend CSS. My project utilizes SCSS, and I am looking for a way for webpack to modularize the CSS generated from SCSS during the final build step. ...

An error occurs in the console stating 'Maximum call stack size exceeded' when trying to add data to the database using JavaScript

I've been struggling with a JavaScript error for the past few days and despite scouring through numerous answers on StackOverFlow, none seem to address my specific issue. My goal is to simply submit a record to the database using a combination of Jav ...

jQuery AJAX event handlers failing to trigger

It's driving me crazy! I've been using jquery's ajax for years, and I can't seem to figure out why the success, error, and complete events won't fire. The syntax is correct, the service it's calling works fine, but nothing hap ...

The output of jQuery('body').text() varies depending on the browser being used

Here is the setup of my HTML code: <html> <head> <title>Test</title> <script type="text/javascript" src="jQuery.js"></script> <script type="text/javascript"> function initialize() { var ...

How can I dive into a nested array to access the properties of an object within?

My array, called sportPromise, is structured like this: 0: Array[0] 1: Array[1] 2: Array[2] 3: Array[3] When I run console.log(angular.toJson($scope.sportPromise, 'pretty'));, the output looks like this: [ [], [ { "id": 5932, ...

Implementing Angular 4 to fetch information from a JSON file

As a beginner in Angular, my current task involves loading data from a JSON file upon click, which I have successfully achieved so far. However, I am facing an issue where I'm unable to load the first JSON object before clicking, meaning that I want ...

The requested resource for deletion could not be found

I'm having trouble deleting a document in Mongodb and I keep getting the "cannot get delete" error delete route router.delete("/delete/:id",(req,res)=>{ filmModel.deleteOne({_id:req.params.id}) .then(()=>{ res.redirect( ...

Connecting to a nearby version of Bootstrap causes CSS to malfunction

Currently, I am facing an issue while developing an angular+bootstrap application for my work. At the initial stages of development, I encountered a problem where all the CSS breaks whenever I link to a local copy of Bootstrap, whether minified or not. My ...

Can fog be applied from a fixed location within a three.js scene without being tied to the camera's position?

Is it feasible to render fog in such a way that an avatar on a terrain remains clear while the surrounding area gradually fades into the mist, especially when the camera is positioned overhead at a distance? ...

Tips for positioning a Wordpress navigation bar to the right of a logo

My goal is to position the navigation bar next to the logo in my Wordpress theme using Underscores. I have successfully aligned the primary navigation and the logo as desired with the following CSS: .main-navigation { position: relative; float: ri ...

A fresh checkbox was added to the page using Jquery Switchery to disable it

I'm having trouble disabling the Switchery checkbox. When I try to disable it, another Switchery checkbox appears on the page along with the one I previously defined: <div class="form-group"> <label class="col-md-2"> ...

The simplest method for integrating SASS within your WordPress website

While I usually work with CSS, I've decided to tackle SASS in order to improve my efficiency. I successfully converted a CSS file from .css to .scss and it still works as expected. However, when I added variables, they didn't function properly. ...

Having trouble displaying the Primevue dialog modal in Vue 3?

I am using [email protected] and [email protected] Main script import { createApp } from 'vue' import App from './App.vue' import router from './router' import PrimeVue from 'primevue/config'; import &apos ...

How to continuously animate images in HTML using Bootstrap

I want to showcase 7-8 client images in a continuous loop using a <marquee> tag. The issue is that there is a gap between the last and first images. Here is the HTML code I have: <marquee> <ul> <li><a href="#&q ...

Select2 isn't functioning properly, consistently showing the message "No results found" every time

After exhausting all options on this platform without success, my goal remains unchanged: to extract state data from a JSON file generated by a servlet and then present the information in a dropdown menu using AJAX. However, no matter what I input into th ...

Setting the default selection in AngularJS based on the URL entered

I've encountered an issue with a dropdown menu in my AngularJS version 1.4 application. The dropdown menu contains links to different sections of the page. The problem arises when I directly enter the page URL - instead of selecting the correct link f ...

What is the best way to add a button over an image using Tailwind CSS in Next.js?

I've been trying to display a button on top of an image using Tailwind CSS and Next.js, but I'm having trouble getting it to align properly. Here is the code snippet I've been working with: <div> <Image src={projectAiWrite ...

Terminate the operation of an active script tag within Angular 11

At the moment, my Angular component is utilizing the Renderer2 library to insert a series of script tags into the DOM. These scripts are sourced externally and I am unable to alter their content. Below is a snippet where the scripts array contains the link ...

JavaScript can be used to create dynamic frames within a

Can anyone help identify the issue in my code? frame 1 <script type="text/javascript"> var Clicks = 0 ; function AddClick(){ Clicks = Clicks + 1; document.getElementById('CountedClicks').innerHTML = Clicks ; } localStorage.setItem(' ...