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

Is it possible to eliminate a style that was applied using the .css() method?

Currently, I am using jQuery to modify the CSS and would like to know how to remove the styling that is being applied based on the input value provided: If the color is not '000000', then change the background-color of the body element to the sp ...

javascriptjquerycss

Struggling to reveal concealed items on a webpage using jQuery and attempting to cycle through an array without success

Looking to display or hide certain sections on a page based on specific conditions. I want to only show the sections of the page that contain words from the conditionsToShow array. function hideWorkflowConditions() { // initially hide the elements ...

javascriptjquerycss

I am looking for a way to batch upload several images from an HTML page to a nodejs server, where I can then rename and

Exploring the world of nodejs, I am seeking guidance on updating multiple images from HTML to node js. Specifically, how can I rename each image differently and save them to a directory? Alternatively, is there another solution that would better suit my ne ...

htmlnode.js

Adjust the pagination page size based on the value in the Angular scope dynamically

My goal is to provide the user with the ability to adjust the number of rows displayed in a table. This feature is crucial for our web app, as it needs to be accessible on various devices and should allow users to customize their viewing experience to redu ...

javascripthtmlangularjspaginationsmart-table

Having a problem with form submission after using preventDefault() in JQuery / Ajax?

Despite reading various questions and answers on this topic, none of the solutions have worked for me after hours of testing. Can someone please help with my problem? $(document).ready(function() { $( "#search_form" ).on('submit',function(ev ...

jqueryajax

Issue with custom function not being triggered by datepicker onSelect in Internet Explorer with JQuery

I have a datepicker set up like this: $("#startDate").datepicker({ onSelect: changeDate }); This is used with the following input field: <input type="text" id="startDate" value="" class="dateField"/> This setup works well in Chrome, but encou ...

javascriptjqueryhtml

Injecting controllers and classes dynamically using AngularJS

I'm currently working on a dynamic widgets list where each widget is defined by its html, class, controller, and name. Some of these parameters may be empty based on the type of widget. These widgets are then loaded dynamically into <li> element ...

javascripthtmlangularjscontrollerwidget

Jquery's intermittent firing of .ajax within if statement

So, I've inherited a rather messy codebase that I need to modernize. The task involves upgrading from an old version of prototype to the latest jQuery 3.2.1 within a dated website built on php and smarty templates (not exactly my favorite). When a lo ...

javascriptphpjqueryhtmlajax

Hover over with your mouse to open and close the dropdown menu in React JS

Just starting out with React JS and encountering a small issue. I'm trying to make the menu disappear when the mouse leaves that area, so I used onMouseOut and onMouseLeave to close it. However, I noticed that having these options in place prevents th ...

javascripthtmlcssreactjsmaterial-ui

Tips for maintaining an active link using CSS

I am looking to create a hover effect for links that remains active when the user is on a specific page. Essentially, I want a background to appear behind the link when it is visited. Below is the HTML code: <div class="menudiv"> <div id="menu"& ...

phphtmlcssmenu

Calculating the calc()-expression in Fluid Typography Linear Transition

After exploring the technique demonstrated by Mike Riethmuller, which involves utilizing calc() to create a fluid font-size transition between a minimum and maximum value, I found the outcome obtained from calc() in the browser somewhat perplexing (and not ...

cssfont-sizetypographycss-calc

The toggle button is having issues functioning properly within a While loop

Is there a way to enable slideToggle for all my queries? Currently, it is only working on the first query. Any suggestions on how to resolve this issue? JS code $(document).ready(function(){ $("#SendCopy").click(function(){ $("#users").slideToggle("s ...

phpjquerycss

Could you explain the distinction between push and offset within the grid system?

I'm currently diving into the world of Bootstrap grids and trying to wrap my head around the concepts of push and offset. In the showcase below, I have two rows that only differ in how the third column is positioned - one using a push and the other an ...

csstwitter-bootstrapuser-interfacetwitter-bootstrap-3

Issue: Node.js Express unable to access static files when the route is nested more than one folder level deep.Resolution

Before we delve into the question, let me share with you the folder structure of my node.js express app: /home server.js index.html /app /routes public.js /public /css main.css In my server.js file, ...

javascriptcssnode.jsexpress

Using the Rails cocoon gem to populate numerous input fields

I'm currently implementing the cocoon gem in my rails application, where I have a form with two nested fields (categories and subcategories). Initially, only the first field is visible while the second one remains hidden. When the first select field h ...

javascriptjqueryruby-on-railscocoon-gem

Clicking twice in a row on a map

I am encountering an issue while collecting user input from an infowindow. When I click the 'Save' button in the infowindow to save the input, it inadvertently results in moving my marker on the map by clicking somewhere else. All I really want t ...

javascripthtmlgoogle-maps

Is there a way to properly align unordered lists (such as a navigation menu) within a div with a width set at

UPDATE: I found a creative solution to my issue. By adding margin-left and margin-right set to auto, along with fixing the width of the nav menu to 1002px and setting its positioning to relative, I was able to achieve the desired effect. Additionally, I cr ...

htmlcsslisthtml-listsunordered

Display the background-image of the <body> element only when the image has finished loading

I have a webpage where I want to delay showing a large image until it has finished downloading. Instead, I would like to display a background with a fading effect while the image loads. The challenge is that the background image must be set within the bod ...

jqueryhtmlcsshidebackground-image

What is the method for defining CSS styles for child elements using the parent element's style attribute?

Here is an example: <div style="SET IMAGE ATTRIBUTES HERE!"> <img src="http://somesite.com/someimg.jpg"><br /> <img src="http://someothersite.com/someotherimg.jpg"><br /> ... </div> With my dynamic ASP.NET ...

htmlcssasp.net

Is it possible to utilize nth-child() without recursion?

Can the CSS selector parent child:nth-child() be used to target only children? The HTML code is as follows: <body> <div>div 1</div> <div> div 2 <div>div 2.1</div> <div>div 2.2</ ...

htmlcss