Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS Help with using modal link to open accordion section based on date

jcmonkey

New Coder
Hi everyone,

Really need some help here. I have been trying to code an html page (with JS script) to get a link within a modal to expand an accordion section based on today's date (at the same time close the modal).

The context of the modal link: it is a buffet product item that allows me to see today's menu contents that is on an accordion section. When clicked, it can expand the menu/accordion section based on the day of the week (or identical dates).

These are how my codes look like currently (sorry if they look bad - I'm just starting out!) :

HTML (for accordion menu - 1 day):

<div class="accordion-item">
<h2 class="accordion-header" id="panelsStayOpen-headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="true" aria-controls="panelsStayOpen-collapseOne">
Monday
</button>
</h2>
<div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show" aria-labelledby="panelsStayOpen-headingOne">
<div class="accordion-body">
Lunch:
<br>
Dinner:
</div>
</div>
</div>

HTML (for product modal):

<div class="modal fade" id="packageModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<p class="modal-title" id="packageTitle">XXXXXXXXXX</p>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<img id="packageImage" src="" class="card-img-top" alt="Package Item Image">
<hr>
<p>Description: <span id="description">XXXXXXXXXXXX</span></p>
<p>Cuisine: <span id="packageCuisine">XXXXXXXXXXXX</span></p>
<a id="todayMenuLink" href="#panelsStayOpen-collapseOne"><p>Today's Menu</p></a>
<p>Price: <span id="packagePrice">XXXXXXXXXXXX</span></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-success">Order now!</button>
</div>
</div>
</div>
</div>

For JS for clicking link in Modal:
// When "Today's Menu" link/button is clicked in product modal, link it to the accordion section for today's menu based on today's date:

document.getElementById("todayMenuLink").addEventListener("click", expandAccordion);

function expandAccordion() {
document.getElementById('panelsStayOpen-collapseOne').collapse("toggle");

}

I am quite lost on the last part, hope to have some help here!
 
Your code looks like it came from bootstrap. You have things here that I don't think you need so I took them out. If you find that you do need them simple put them back and no harm should be done.
I made it so the menu expands and contracts with the day of the week button. Removed the dismiss and the order buttons.

Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device_width, initial_scale=1.0;" charset="utf_8">
<style>
.accordion_item{
    width: 225px;
    border:1px black;
    display: inline-table;
}
.accordion {
    font-size: 15px;
    background-color: #eee;
    color: #444;
    text-align: center;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border-radius: 15px;
}
.active, .accordion:hover {
  background-color: #ccc;
}
.accordion_body {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}
</style>
</head>

<body>
<div class="accordion_item">
    <button class="accordion">Monday</button>
    <div class="accordion_body">
        <div class="modal_body">
        <h3>Lunch</h3>
            <p>Description: <span id="description">XXXXXXXXXXXX</span></p>
            <p>Cuisine: <span id="packageCuisine">XXXXXXXXXXXX</span></p>
            <p>Price: <span id="packagePrice">XXXXXXXXXXXX</span></p>
        </div>
        <hr>
        <div class="modal_body">
        <h3>Dinner</h3>
            <p>Description: <span id="description">XXXXXXXXXXXX</span></p>
            <p>Cuisine: <span id="packageCuisine">XXXXXXXXXXXX</span></p>
            <p>Price: <span id="packagePrice">XXXXXXXXXXXX</span></p>
        </div>
    </div>
</div>

<div class="accordion_item">
    <button class="accordion">Tuesday</button>
    <div class="accordion_body">
        <div class="modal_body">
        <h3>Lunch</h3>
            <p>Description: <span id="description">XXXXXXXXXXXX</span></p>
            <p>Cuisine: <span id="packageCuisine">XXXXXXXXXXXX</span></p>
            <p>Price: <span id="packagePrice">XXXXXXXXXXXX</span></p>
        </div>
        <hr>
        <div class="modal_body">
        <h3>Dinner</h3>
            <p>Description: <span id="description">XXXXXXXXXXXX</span></p>
            <p>Cuisine: <span id="packageCuisine">XXXXXXXXXXXX</span></p>
            <p>Price: <span id="packagePrice">XXXXXXXXXXXX</span></p>
        </div>
    </div>
</div>

<div class="accordion_item">
    <button class="accordion">Wednesday</button>
    <div class="accordion_body">
        <div class="modal_body">
        <h3>Lunch</h3>
            <p>Description: <span id="description">XXXXXXXXXXXX</span></p>
            <p>Cuisine: <span id="packageCuisine">XXXXXXXXXXXX</span></p>
            <p>Price: <span id="packagePrice">XXXXXXXXXXXX</span></p>
        </div>
        <hr>
        <div class="modal_body">
        <h3>Dinner</h3>
            <p>Description: <span id="description">XXXXXXXXXXXX</span></p>
            <p>Cuisine: <span id="packageCuisine">XXXXXXXXXXXX</span></p>
            <p>Price: <span id="packagePrice">XXXXXXXXXXXX</span></p>
        </div>
    </div>
</div>

<div class="accordion_item">
    <button class="accordion">Thursday</button>
    <div class="accordion_body">
        <div class="modal_body">
        <h3>Lunch</h3>
            <p>Description: <span id="description">XXXXXXXXXXXX</span></p>
            <p>Cuisine: <span id="packageCuisine">XXXXXXXXXXXX</span></p>
            <p>Price: <span id="packagePrice">XXXXXXXXXXXX</span></p>
        </div>
        <hr>
        <div class="modal_body">
        <h3>Dinner</h3>
            <p>Description: <span id="description">XXXXXXXXXXXX</span></p>
            <p>Cuisine: <span id="packageCuisine">XXXXXXXXXXXX</span></p>
            <p>Price: <span id="packagePrice">XXXXXXXXXXXX</span></p>
        </div>
    </div>
</div>

<div class="accordion_item">
    <button class="accordion">Friday</button>
    <div class="accordion_body">
        <div class="modal_body">
        <h3>Lunch</h3>
            <p>Description: <span id="description">XXXXXXXXXXXX</span></p>
            <p>Cuisine: <span id="packageCuisine">XXXXXXXXXXXX</span></p>
            <p>Price: <span id="packagePrice">XXXXXXXXXXXX</span></p>
        </div>
        <hr>
        <div class="modal_body">
        <h3>Dinner</h3>
            <p>Description: <span id="description">XXXXXXXXXXXX</span></p>
            <p>Cuisine: <span id="packageCuisine">XXXXXXXXXXXX</span></p>
            <p>Price: <span id="packagePrice">XXXXXXXXXXXX</span></p>
        </div>
    </div>
</div>
<script>
var accordion= document.getElementsByClassName("accordion");
var i;

for (i = 0; i < accordion.length; i++) {
    accordion[i].addEventListener("click", function() {
        this.classList.toggle("active");
        var panel = this.nextElementSibling;

        if (panel.style.display === "block") {
            panel.style.display = "none";
        } else {
            panel.style.display = "block";
        }
    });
}
</script>
</body>
</html>
 
Hi OldMan,

The layout looks better than what I had! Thing is, can I check if is it possible to use a link to directly expand the day's menu? E.g. if I click on the button within each product item (or modal link) on a Friday, it will expand only Friday's menu.

Thank you!
 
I don't know what you mean by
.... use a link to directly expand the day's menu?
That's what it does, click on the Friday button and the menu expands, click it again and it disappears.

f I click on the button within each product item
There are no links in the menu. What links did you want what would a food item link to that can't be placed on the menu?
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom