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!
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!