Ways to automatically trigger the opening of a Bootstrap accordion without manual

On my website, I have an "About Us" page featuring 3 bootstrap accordions - "Stories", and "Testimonials".

My goal is to make it so that when a user clicks on the "FAQ" link in the navigation menu, they are directed to the "About Us" page with the "Testimonials" accordion automatically expanded.

Menu Navigation:

<a href="http://mydevwebsites.info/rmhc-WP/about-us" data-target="#collapseTwo" id="faqbtn">FAQ</a>

About Us Page (sample page)

<a class="accordion-toggle accord-btn text-center" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> 
  <div class="accord-bg">
    Stories
    <span class="ico-holder"><i class="fa fa-plus"></i></span>
  </div>
</a>

<a class="accordion-toggle accord-btn text-center" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> 
  <div class="accord-bg">
    Testimonials
    <span class="ico-holder"><i class="fa fa-plus"></i></span>
  </div>
</a>
jqueryhtmlcsstwitter-bootstrap

Answer №1

Include the "in" class in your accordion to indicate which one should be open

To see an example of how accordions work, check out the documentation (look for the accordion example further down the page)

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

Resolving the Material-UI NextJS Button Styling Dilemma

I've encountered an issue with the styling of a few buttons in JS. When I apply a styling class using className, the formatting works fine on the initial render but loses its styling on subsequent refreshes. This problem is specific to two individual ...

htmlcssreactjsmaterial-uinext.js

Is there a way to make a table stay at a specific width for screen sizes larger than 1000px, but then adjust its size accordingly as the window size decreases?

<table id="example" class="row-border compact" style="width:1000px; table-layout:fixed;"> The table is currently set to have a width of 1000px, but I would like it to be 90% of the screen width when the window size is less than 1000px. Is it possibl ...

htmlhtml-tabledatatable

Using jQuery to select elements with specific innerHTML values

$('.select option:selected[innerHTML="5"]') In this case, I am attempting to choose an option that is currently selected and has innerHTML that perfectly matches a specific string (for example: "5") For reference, here is a fiddle link: http:// ...

javascriptjqueryselectorinnerhtml

Methods to maintain the select2 dropdown event open while interacting with another select2 dropdown

I have a situation where I need to dynamically add a class to a div whenever a select2 dropdown is open. To achieve this functionality, I am utilizing the open and close events of select2. The current code successfully adds the class when opening a selec ...

javascriptjqueryhtmlcssjquery-select2

A guide on incorporating text into a file utilizing JSP within HTML

I am working on a project that includes a JSP file and a .txt file. The JSP file contains a text field and a button, where the user can enter a text and click the button to store it in the .txt file. I have provided my code below, but I seem to be missin ...

htmljspservlets

Performing mathematical operations in JavaScript, rounding to the nearest .05 increment with precision up to two

Apologies in advance. After reviewing multiple posts, it seems like the solution involves using the toFixed() method, but I'm struggling to implement it. $('.addsurcharge').click(function() { $('span.depositamount&ap ...

javascriptjquerymathdecimalrounding

Sending data using jQuery's AJAX feature

Here is an example of the code I have: var loadUrl = 'test.php'; var dataObject = { category_id: category_id, grade_val: grade }; jQuery.ajax({ type: 'POST', url: loadUrl, data: dataObject, dataType: 'html', ...

javascriptajaxjquery

Is it possible to use Ajax to prompt a pop-up window for basic authentication when logging in?

While attempting to access the reed.co.uk REST web API in order to retrieve all related jobs, I am encountering an issue. Despite passing my username and password, a popup window keeps appearing when I call the URL. The alert message displayed reads: i ...

javascriptjqueryajaxapiauthentication

Struggling to keep text aligned to the left?

Check out the image at in my jsfiddle. It remains fixed in its position regardless of the screen width. However, the adjacent text does not behave in the same way. I aim to have the text positioned DIRECTLY next to the icon without any movement even if ...

htmlcsscss-position

Verification symbols in Unicode

I'm on the hunt for a universal checkmark symbol that is compatible across various operating systems and web browsers. I've tested out the following two options: Version 1: ✓ Version 2: ✔ (source) However, these symbols seem to be working ...

htmlunicodeasciihtml-entities

Utilizing Flask to gather information from a leaflet map

I am currently working on creating a webpage using Flask. The webpage features a leaflet map where users can click to create a marker that opens a popup window with a link. The link's purpose is to open a new page displaying the longitude and latitude ...

javascripthtmlflask

Exploring the use of radio buttons with Bootstrap and AngularJS

Having a radio button like this: <tr> <td>GTS ? </td> <td> <div class="col-md-10 columns"> <ul id="GTSD" class="radio" role="menu" aria-labelledby="menu1"> <label class= ...

jqueryangularjs

Confirm the session validity before invoking the web service function from an ajax function triggered by clicking a button

I am experiencing a complex issue. On a page, users input data and then click on a button to save all the parameters into a JSON object. After saving locally, they click another button which triggers an ajax method that calls a web service method on the sa ...

javascriptc#jqueryasp.netajax

Utilizing JQuery to Extract Data from a Nested JSON Array

My API is returning a JSON string with various values that I need to extract using JQuery. "[ ["West Baton Rouge test hello world", "1"], ["LSU Parking \u0026 Transportation Services", "2"], ["demokljafsk", "3"], ["latest", "19"], ...

javascriptjqueryarraysjsonfrontend

When the mouse button is released or when an event listener is

I've been pondering a question that has yet to be fully answered. When I implement this technique to catch a mouse up event: <div onmouseup="/*Script to be executed*/"></div> Is it more efficient than this newer approach: <div id=" ...

javascripthtmlmouseevent

Utilize a specific component to enclose particular words within a contenteditable div in an Angular project

I have a task at hand where I need to manipulate text input from a contenteditable division, use regex to identify specific words, and then wrap those words within an angular component. Although I have managed to successfully replace the text with the com ...

javascripthtmlangularstringdom

Just recently updated to Angular 14 and I'm encountering a problem with images not loading from the assets folder. I'm wondering if there is a configuration step I missed. Could someone please

https://i.stack.imgur.com/4LEQ4.png https://i.stack.imgur.com/3sxzF.png Is there a configuration missing in Angular 14? When I try using <img [src]="assets/images/sidebarNav"> with ./, ../, it doesn't work. I have followed the instr ...

htmlangularwebbrowser

Disregarding the connections contained in the columns

In my search for data within a table, I am faced with the challenge of excluding certain columns that contain links instead of plain text. The current approach involves using the .each method to iterate through each row and then utilizing the text() functi ...

jquery

Tips for updating the content of a DIV element on a separate page

One question that often arises is how to change the content of a div element on a different page within a website. While it is common to use Ajax to dynamically update div content within the same page by fetching data from an external .html file, the proce ...

ajaxhtmlreplace

What is the process of adding a phone number with an extension on an iPhone web application?

When building a web application, inserting the following number: <a href="tel:888-123-4567">call now</a> The iPhone will automatically convert that link into an instant call function when clicked. But what should I do if the number includes ...

htmliosphone-numberphone-call