Achieve the effect of making the Bootstrap JS Collapse text bold after it has been

Is there a way to make Bootstrap JS Collapse text Bold after it has been clicked on?

<tr data-toggle="collapse" data-target="#demo8" class="accordion-toggle">
            <td>
                <div class="faq_title bold" id="q13">How can I renew my subscription? </div>

                <div class="accordian-body collapse" id="demo8">

                    <div class="col-md-8 text-justify py-4 pl-0" style="border-top: 1px solid #DEE2E6;">
                        <p>
                            Some information here
                        </p>

                    </div>
                </div>
            </td>
        </tr>

https://i.sstatic.net/RqmqQ.png

javascriptjquerycssbootstrap-4

Answer №1

If you want to make the active title bold, you can utilize the Collapse Events. Take a look at the example below for guidance.

$('.collapse').on({
  'show.bs.collapse': toggleCollapseBold,
  'hidden.bs.collapse': toggleCollapseBold
});

function toggleCollapseBold(e) {
  $(e.target).prev().toggleClass('font-weight-bold');
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous" />

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bbcbd4cbcbdec995d1c8fb8a958a8d958b">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

<table>
  <tr data-toggle="collapse" data-target="#demo8" class="accordion-toggle">
    <td>
      <div class="faq_title bold" id="q13">How do I renew? </div>
      <div class="accordian-body collapse" id="demo8">
        <div class="col-md-8 text-justify py-4 pl-0" style="border-top: 1px solid #DEE2E6;">
          <p>
            Some customized content goes here.
          </p>
        </div>
      </div>
    </td>
  </tr>
</table>

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

Extracting information from an external website in the form of XML data

Trying to retrieve data from an XML feed on a remote website , I encountered issues parsing the XML content and kept receiving errors. Surprisingly, fetching JSON data from the same source at worked perfectly. The code snippet used for XML parsing is as f ...

javascriptjqueryhtmlxmlajax

Creating interactive routes and pages using Next.js and Prisma, embracing dynamic functionality

I have product information cards stored in my database, and I successfully display them on the user's page. Now, I want to add a "More Details" button on each card that will link to a new page (/pages/card/[id]). However, I'm unsure how to retrie ...

javascriptdatabasenext.jsprisma

Securing URL Query Parameters

Working with Liferay 5.2 and ExtJS 3.4 poses a challenge for parameter passing in the URL. The issue arises when reports are generated based on parameters passed in the URL, allowing manual changes that lead to the generation of unauthorized reports. The ...

javajavascriptextjsencryption

Using Jquery to continuously animate elements breaks and repeats the process

I am currently using a jQuery function to animate my text. The issue is that it animates all elements simultaneously instead of separately. I would like each element (h2, h3, and span) to be animated individually. Any suggestions on how I can achieve this ...

jquery

Switching between Custom tooltips and default tooltips in Chart.js and Angular

I need to show a tooltip based on certain conditions options: { tooltips: if (tooltipCondition === true) { { mode: 'index', position: 'nearest' } } else { { enabled: false, custom: function (tooltipMo ...

javascriptangularchart.js

ASP.Net listview that allows users to click on rows to highlight the selected item

Every row in my ASP.net list view is made up of multiple components enclosed in a <div>. I have a two-part question: How can I make these rows clickable to utilize the SelectedIndexChanged event and load data in another user control based on the ...

jqueryasp.netlistview

Ensure that the headers of the table are in perfect alignment with the

Is there a way to create a table with fixed row headers so that column headings stay in place while scrolling? I've managed to achieve this, but now the table headers are not aligned properly with the rows below. I've also created a helpful jsfid ...

htmlcss

Using setInterval to update the content of a Text Area continuously

I am currently working on a script that involves extracting a string from a textarea, breaking it down into an array using the delimiter "=====\n", and then displaying each element of the array in the textarea every 250ms. However, I have noticed that ...

javascripttimersetinterval

Using Vue.js's computed property to dynamically bind a class in v-bind

I am familiar with using v-bind:class when returning true or false from a computed function. I am curious to know if it is possible to use a computed property that matches the ID and value of a button being clicked. For example, clicking button 1 would al ...

javascriptvue.js

The TypeScript inference feature is not functioning correctly

Consider the following definitions- I am confused why TypeScript fails to infer the types correctly. If you have a solution, please share! Important Notes: * Ensure that the "Strict Null Check" option is enabled. * The code includes c ...

javascripttypescripttype-inference

Customize Your Google Maps with Checkboxes for Style Options

Trying to make dynamic changes in the style of a Google Maps using checkboxes. Some checkboxes control colors of features, while others control visibility. Having trouble figuring out how to combine different features of styles since they are not strings ...

javascriptgoogle-maps

Using Variables and jQuery: Capturing Values and Putting Them to Use (Part Three)

Hey everyone, I recently posted a question about variables and jquery: how to capture value and use them (part 3). You can also find related questions about variables and jquery: part 1 and part 2. In my project, I needed to: 1. Capture a value from an ul ...

jqueryglobal-variableshtml-lists

Is it possible for JavaScript to access and read a local file from a web page hosted locally

I am interested in using html, css, and javascript to develop a user interface for configuring a simulation. This interface will be used to generate a visualization of the simulation and an output parameters file based on multiple input files. It is impor ...

javascriptfilelocalhtml

Tips for effectively handling color inheritance within Bootstrap 5

I need to customize Bootstrap 5 .text-success color for better contrast on my custom .bg-lvlN classes. Here is how I have defined them: .bg-lvl1 { background-color: #303333; } .bg-lvl2 { background-color: #222424; } /* Overriding .text-success c ...

csssassbootstrap-5

What is the best way to import an external file from the project's root directory using webpack?

I am currently working on a unique npm package that will allow for the integration of custom rules from the project root. This functionality is similar to how prettier searches for a .prettierrc file in the project root. For this particular package, I am ...

javascriptreactjsnpmwebpackwebpack-2

What is the best way to group an array based on a dynamic key?

My goal is to group values in an array by a given ID. I've attempted a method for this, but it's not working for dynamic keys. Here is the current array: let employees = [{"employeeDetail": [{"empID": "XXYYZZ11"," ...

javascriptnode.jstypescriptexpressecmascript-6

Is there a way to automatically fill number fields by clicking on radio buttons using a JavaScript function?

Currently, I am facing an issue with a task that involves three elements: 1. Two Number fields (from standard class) that need to be populated dynamically. 2. A Javascript function designed to extract coordinates using geolocator. 3. A radio button which, ...

javascriptphpgravity-forms-plugin

Line breaks showing up on the page that are not present in the HTML source code

Why are unwanted line breaks appearing in my rendered DOM that are not in the source code, causing the content to be displaced? And how can I resolve this issue? Below is the code snippet: <div class="float-left" style="position:relative;left:15px"> ...

htmlbootstrap-4markdownhexo

Changing the hidden input value to the data-id of a selected <a> element

I've set up a form with a dropdown menu and subdropdowns, generated using a foreach loop through a @Model. When I click on one of the options, I want the value of my hidden input field to match the data-id of the clicked item. This is what I have in ...

javascriptjqueryhtmlinputhidden

Is there a Node.js method that is similar to jQuery AJAX's .complete() function

In the process of creating a Node.js API to enroll a user in a different web application, I encountered an issue. As part of the registration flow, the API called by the Node app using request is being redirected with a status code of 301 to another API to ...

javascriptnode.js