How to let an A href link in the menu bar when clicked, it opens a closed accordion in the body? - html

user_14243649 0
Viewed 167

how the first accordion could be opened when clicked on the a href named "open 1st accordion" and the same thing for the second a href?? The accordion itself works 100% right, I just want to access it from outside it's scope, when clickng on an a href button 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 (every a href in this menu should link to accordions in index.html and open them)

<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>
accordion css html jquery javascript
1 Answers

Add a class to the top tags a:

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

Next, using the each() method and the index parameter, write the logic of the click event on these a tags.

Use event.preventDefault() to disable the default behavior of the a tag.

And using the trigger() method, call click events on the .expand class using an eq() with the appropriate index:

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

As such, we get the following code. Just add it to your main code.

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

EDIT:

Modified the jquery code taking into account the 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: 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 class="accord" href=""> Open 1st accordion </a> <br>
<a class="accord" 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>

user_135734440
Related