Tips for creating a clickable A href link in the menu bar that triggers an accordion to open in the body when clicked - html

Is there a way to open the first accordion when clicking on the "open 1st accordion" link, and do the same for the second link? The accordions themselves work perfectly fine, I just need a way to trigger them from outside their scope by clicking on links in the menu bar.

$(".expand").on("click", function () {
    $(".right-arrow").text("+");
    $(".detail:visible").slideUp();
    if(!$(this).next().is(":visible")){

        $(this).next().slideDown(200);
        $(this).find(".right-arrow").text("-");
    }
});
/*Tips & Tricks Page*/
*,
*:before,
*:after {
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box;
}

#trickslist {
    font-family: 'Open Sans', sans-serif;
    width: 80%;
    margin: 0 auto;
    display: table;
}
#trickslist ul {
    padding: 0;
    margin: 20px 0;
    color: #555;
}
#trickslist ul > li {
    list-style: none;
    border-top: 1px solid #ddd;
    display: block;
    padding: 15px;
    overflow: hidden;
    text-align: center;
}
#trickslist ul:last-child {
    border-bottom: 1px solid #ddd;
}
#trickslist ul > li:hover {
    background: #efefef;
}
.expand {
    display: block;
    text-decoration: none;
    color: #555;
    cursor: pointer;
}
.tipstricks {
    padding: 5px;
    margin: 0;
    font-size: 17px;
    font-weight: 400;
}

span {
    font-size: 12.5px;
}
#left,#right{
    display: table;
}

.detail a {
    text-decoration: none;
    color: #C0392B;
    border: 1px solid #C0392B;
    padding: 6px 10px 5px;
    font-size: 14px;
}
.detail {
    margin: 10px 0 10px 0px;
    display: none;
    line-height: 22px;
    height: 150px;
}
.detail span{
    margin: 0;
}
.right-arrow {
    padding-top: 0px;
    margin-top: 0px;
    margin-left: 20px;
    width: 10px;
    height: 100%;
    float: right;
    font-weight: bold;
    font-size: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<a href=""> Open 1st accordion </a> <br>
<a href=""> Open 2nd accordion </a>

<div class="container">
    <div class="row" id="accordion1">
        <div id="trickslist">
            <ul>
                <li>
                    <a class="expand" data-parent="#accordion1">
                        <div class="right-arrow">+</div>
                        <div>
                            <h2 class="tipstricks">Exploring your Motivations to Quit Tobacco</h2>
                        </div>
                    </a>
                    <div class="detail">
                    </div>
                </li>
                <li>
                    <a class="expand" data-parent="#accordion1">
                        <div class="right-arrow">+</div>
                        <h2 class="tipstricks">What to expect over time.</h2>
                    </a>
                    <div class="detail">
                    </div>
                </li>
                <li>
                    <a class="expand" data-parent="#accordion1">
                        <div class="right-arrow">+</div>
                        <h2 class="tipstricks">Getting Ready: Strategies to conquer urges & set a quit date</h2>
                    </a>
                    <div class="detail">
                    </div>
                </li>
                <li>
                    <a class="expand" data-parent="#accordion1">
                        <div class="right-arrow">+</div>
                        <h2 class="tipstricks">Quitting tobacco with medications</h2>
                    </a>
                    <div class="detail">
                    </div>
                </li>
                <li>
                    <a class="expand" data-parent="#accordion1">
                        <div class="right-arrow">+</div>
                        <h2 class="tipstricks">Dealing with depression or stress</h2>
                    </a>
                    <div class="detail">
                    </div>
                </li>
                <li>
                    <a class="expand" data-parent="#accordion1">
                        <div class="right-arrow">+</div>
                        <h2 class="tipstricks">Avoiding weight gain or alcohol</h2>
                    </a>
                    <div class="detail">

                    </div>
                </li>
                <li>
                    <a class="expand" data-parent="#accordion1">
                        <div class="right-arrow">+</div>
                        <h2 class="tipstricks">Making your plan stick: relapse prevention</h2>
                    </a>
                    <div class="detail">
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>

Services.html (each link in this menu should correspond to an accordion section in index.html and open it)

<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item" >
<a class="nav-link" href="about.html">Who We Are
</a>
</li>
<li class="nav-item">
<a class="accord" href="">Our Services</a>
</li>
<li class="nav-item" id="nav">
<a href="index.html"> <img src="assets/images/name.png"/> </a>  
</li>
<li class="nav-item">
<a class="accord" href="">Our Clients</a>
</li>
<li class="nav-item">
<a class="accord" href="" >Contact Us</a>
</li>
</ul>
</div>
javascripthtmljquerycssaccordion

Answer №1

To enhance the top tags a, include a new class:

<a class="accord" href=""> Open 1st accordion </a> <br>
<a class="accord" href=""> Open 2nd accordion </a>

Subsequently, implement the click event logic on these a tags using the each() method and the index parameter.

Utilize event.preventDefault() to halt the default behavior of the a tag.

Employ the trigger() method to trigger click events on the .expand class with an appropriate eq() index:

$(".expand").eq(index).trigger('click');

Apply the provided code snippet within your main code for this functionality:

$('.accord').each(function(index) {
  $(this).click(function(event) {
    event.preventDefault();
    $(".expand").eq(index).trigger('click');
  });
});

UPDATE:

An updated version of the jquery code considering the use of localStorage().

$(document).ready(function () {
    $(".expand").on("click", function () {
        $(".right-arrow").text("+");
        $(".detail:visible").slideUp();
        if (!$(this).next().is(":visible")) {
            $(this).next().slideDown(200);
            $(this).find(".right-arrow").text("-");
        }
    });

    let click_state = localStorage.getItem("click_state");
    let ind = localStorage.getItem("ind");

    if (click_state == 1) {
        $(".expand").eq(ind).trigger("click");

        localStorage.removeItem("click_state");
        localStorage.removeItem("ind");
    } else {
    }

    $(".accord").each(function (index) {
        $(this).click(function (event) {
            event.preventDefault();

            localStorage.setItem("click_state", 1);
            localStorage.setItem("ind", index);
        });
    });
});
/*Tips & Tricks Page*/
*,
*:before,
*:after {
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box;
}

#trickslist {
    font-family: 'Open Sans', sans-serif;
    width: 80%;
    margin: 0 auto;
    display: table;
}
#trickslist ul {
    padding: 0;
    margin: 20px 0;
    color: #555;
}
#trickslist ul > li {
    list-style: none;
    border-top: 1px solid #ddd;
    display: block;
    padding: 15px;
    overflow: hidden;
    text-align: center;
}
#trickslist ul:last-child {
    border-bottom: 1px solid #ddd;
}
#trickslist ul > li:hover {
    background: #efefef;
}
.expand {
    display: block;
    text-decoration: none;
    color: #555;
    cursor: pointer;
}
tipstricks {
    padding: 5px;
    margin: 0;
    font-size: 17px;
    font-weight: 400;
}

span {
    font-size: 12.5px;
}
#left,#right{
    display: tabular-column;
}

.detail a {
    text-decoration: none;
    color: #C0392B;
    border: 1px solid #C0392B;
    padding: 6px 10px 5px;
    font-size: 14px;
}
.detail {
    margin: 10px 0 10px 0px;
    display: none;
    line-height: 22px;
    height: 150px;
}
detail span{
    margin: 0;
}
right-arrow {
    padding-top: 0px;
    margin-top: 0px;
    margin-left: 20px;
    width: 10px;
    height: 100%;
    float: right;
    font-weight: bold;
    font-size: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<a class="accord" href=""> Open 1st accordion </a> <br>
<a class="accord" href=""> Open 2nd accordion </a>

<div class="container">
    <div class="tabulation-row" id="accordion1">
        <div id="trickslist">
            <ul>
                ... [Content continues]

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

Difficulty transferring information between two components by using services

I am trying to pass the values of an array from the Search component to the History component in order to display the search history. My current code structure looks like this: search-page.component.ts export class SearchPageComponent implements OnInit ...

javascriptangularservicecomponents

The 'import type' declaration cannot be parsed by the Babel parser

Whenever I attempt to utilize parser.parse("import type {Element} from 'react-devtools-shared/src/frontend/types';", {sourceType: "unambiguous"}); for parsing the statement, I come across an error stating Unexpected token, exp ...

javascripttypescriptbabeljsbabel-parser

Looking for Assistance with Creating a Non-Adhesive Footer in CSS?

My goal is to have the footer remain at the bottom of the page, which I achieved using the following CSS: position: absolute; bottom: 0px; While this code does bring the footer to the bottom as desired, the issue arises when the window is resized to a sm ...

c#asp.netcssasp.net-mvc-3footer

Navigation arrows for sliding`

Is there a way to add custom right/left arrows to the Ionic slider component? Demo: Check it out on Stackblitz Note: Make sure to refer to the home.html page for more details. .html <ion-slides [pager]="true" [slidesPerView]="2"> <ion ...

cssangulartypescriptionic3swiper.js

Convert require imports to Node.js using the import statement

Currently learning NodeJs and encountering a problem while searching for solutions. It seems like what I am looking for is either too basic or not much of an issue. I am working on integrating nodejs with angular2, which involves lines of code like: impo ...

javascriptnode.jsimportnpmrequire

The functionality of Angular material input fields is compromised when the css backface property is applied

I utilized this specific example to create a captivating 3D flip animation. <div class="scene scene--card"> <div class="card"> <div class="card__face card__face--front">front</div> <div class="card__face card__face--ba ...

cssangularangular-material

Personalized AWS Cognito: Strategies for Tailoring Input Field Designs

MY CURRENT CHALLENGE: Within my Vue application, I am utilizing the AWS authenticator for managing login and signup processes. However, customizing its style has proven to be difficult due to the structure being built with shadow DOM elements. CURRENT S ...

javascriptcssamazon-web-servicesvue.jsamazon-cognito

Updating the content on your website is similar to how Facebook updates their news feed. By regularly

I am currently working on developing a webpage that can automatically update data by utilizing an ajax method. The challenge I'm facing is that the ajax method needs to be called by the user, and there isn't a continuous process in place to monit ...

phpjqueryajax

Assign a specific value to each object

Receiving data from the backend in a straightforward manner: this.archiveService.getRooms(team).subscribe( res => { this.form = res; this.form.forEach(el => { el.reservation.slice(-6).match(/.{1,2}/g).join('/'); }); }, ...

javascriptangulartypescript

Obtain information using AJAX calls with jQuery Flot

Having an issue with jQuery Flot that I need help resolving. PHP output (not in JSON format): [[1, 153], [2, 513], [3, 644]] ~~ [[1, 1553], [2, 1903], [3, 2680]] Here is the jQuery call: $.ajax({ url: 'xxx.php', success: function (dat ...

javascriptjqueryajaxgetflot

Connecting iosSlider to specific slides

I am having trouble utilizing iosSlider for my project. I have tried to link the slides, but I am encountering issues. In order to display the current slide number in the URL, I am using this function here. It is successfully adding the number to the URL, ...

jqueryhashhyperlinkslider

Prevent links from being clicked multiple times in Rails using Coffeescript

Please make the following link inactive after it has been clicked once <%= link_to "Submit Order", {:action => "charge"}, class: 'btn btn-primary', id: 'confirmButton' %> To permanently deactivate the link, use the code below ...

javascriptjqueryruby-on-railsruby-on-rails-4coffeescript

Establishing a connection to a JSON API to retrieve and process

I am trying to extract all instances of names from this page: . For guidance, I have been using this tutorial as a reference: . However, when I run the code provided, it doesn't return anything. What could be going wrong? var request = new XMLHttpRe ...

javascriptjsonapi

What could be causing the Angular HTTPClient to make duplicate REST calls in this scenario?

I am encountering an issue with my Angular service that consumes a Rest API. Upon inspecting the network and the backend, I noticed that the API is being called twice every time: Here is a snippet of my Service code: getAllUsers():Observable<any>{ ...

javascriptangularrxjshttpclient

Assign a predetermined value to a dropdown list within a FormGroup

I have received 2 sets of data from my API: { "content": [{ "id": 1, "roleName": "admin", }, { "id": 2, "roleName": "user", }, { "id": 3, "roleName": "other", } ], "last": true, "totalEleme ...

javascriptangularjstypescript

Display an image on click using jQuery and smoothly fade it in once it has fully loaded

I'm curious if there's a way to achieve this. Currently, the fadeIn effect doesn't seem to work when I run the test. It seems like it triggers as soon as the image tag is in the document, but only actually displays once the entire image has ...

jqueryimageloadfadeineffect

What is the reason for node-sass being rebuilt after upgrading from npm6 to npm7?

My application utilizes sass opposed to node-sass. Within my package-lock.json file, there is no mention of node-sass. I have been successfully using npm 6 for years without any issues. However, upon attempting to run npm install with npm 7, I encounter ...

javascriptnpmsassnpm-installnode-sass

Display Default Image in Vue.js/Nuxt.js when Image Not Found

I'm currently working on implementing a default image (placeholder image) for situations where the desired image resource is not found (404 error). I have a dictionary called article which contains a value under the key author_image. Although the stri ...

javascriptvue.jsvuejs2nuxt.js

Using NextJS to pass a string from an input field to getStaticProps via context

I am a beginner in NextJS and React, so please forgive my lack of knowledge. I am trying to figure out how to pass the text input by users from an input field (inside Header) to the getStaticProps function of a specific page using the React context API. I ...

javascriptreactjsnext.jsreact-contextglobal-state

The process of adding a tooltip icon to a Select component in Material-UI

I'm currently working with the material UI tooltip component and I want to position my tooltip to the right of a dropdown, right next to the down arrow as shown in the image below: https://i.stack.imgur.com/O2gwh.png However, the way it is set up no ...

htmlcssreactjsmaterial-ui