UPDATE: I kindly request a review of the answers provided. Utilizing JavaScript for this task may not be the most efficient method. I will keep this question as it is, as it could potentially benefit someone else.
The aim is for every ".ulInCollapse li" to be independently calculated. My objective is met by assigning different class (or id) names like .ulInCollapse1, .ulInCollapse2, etc., but I understand this is not the best practice. I also made adjustments to my JavaScript code in an attempt to iterate through;
const ulInCollapse = document.querySelectorAll(".ulInCollapse");
console.log(ulInCollapse)
ulInCollapse.forEach(function (ulInCollapse) {
var ulInCollapseLiCount = ulInCollapse.length;
var ulInCollapseLiCountChild = document.querySelector(".ulInCollapse li:last-child");
if (ulInCollapseLiCount % 2 != 0) {
ulInCollapseLiCountChild.style.paddingTop = "15px";
} else {
ulInCollapseLiCountChild.style.paddingTop = "0px";
}});
I am struggling to determine what steps to take next. I hope I have sufficiently conveyed my issue.
// Targeting all ".ulInCollapse li" and applying conditional statement to adjust padding for the last child accordingly
const ulInCollapse = document.querySelectorAll(".ulInCollapse li");
var ulInCollapseLiCount = ulInCollapse.length;
var ulInCollapseLiCountChild = document.querySelector(".ulInCollapse li:last-child");
console.log(ulInCollapseLiCount);
if (ulInCollapseLiCount % 2 != 0) {
ulInCollapseLiCountChild.style.paddingTop = "15px";
} else {
ulInCollapseLiCountChild.style.paddingTop = "0px";
}/* Here I aim to add padding to every 2nd list item starting from the first */
.ulInCollapse li:nth-child(2n+1):not(:last-child) {
padding: 15px 0px;
}
/* Applying JS to set padding-top on this selector */
.ulInCollapse li:last-child {
padding-top: 0px;
}<button class="collapsible">Simple Tenses</button>
<div class="content">
<ul class="ulInCollapse" style="list-style-type: none; padding: 0%;">
<li><a href="#">Simple Present Tense</a></li>
<li><a href="#">Simple Perfect Tense</a></li>
<li><a href="#">Simple Perfect Tense</a></li>
</ul>
</div>
<button class="collapsible">Past Tenses</button>
<div class="content">
<ul class="ulInCollapse" style="list-style-type: none; padding: 0%;">
<li><a href="#">Simple Present Tense</a></li>
<li><a href="#">Simple Perfect Tense</a></li>
<li><a href="#">Simple Perfect Tense</a></li>
</ul>
</div>
<button class="collapsible">Future Tenses</button>
<div class="content">
<ul class="ulInCollapse" style="list-style-type: none; padding: 0%;">
<li><a href="#">Simple Present Tense</a></li>
<li><a href="#">Simple Perfect Tense</a></li>
<li><a href="#">Simple Perfect Tense</a></li>
</ul>
</div>