I've been working on a small business website for the past few weeks, and I'm updating and tweaking it by adding JavaScript functionality to make it more dynamic and interactive. I had a set of cards that had services on them and wanted to implement a drop-down so that more text would show when clicked. I knew that I needed a loop, and since I wasn't looping through an array but a set of HTML elements, I decided to use a for loop instead of the forEach loop. Also, I'm more comfortable with the for loop and am still wrapping my head around forEach. Here are the actual cards I created:
You can check them out to see how the dropdown works on the website I built: www.bizzcrew.com. In this article, I will show you how I achieved it with vanilla JavaScript. I will link the CodePen at the bottom.
First, I created the HTML:
Then, I added the styling with CSS:
Make sure to add a defined height. Adding "height: 100%" to the .card class causes the cards to take up the full height of their parent container. Without a defined height, the cards would expand only to the height necessary to contain their content, which could cause the layout to be unpredictable. By setting the height to 100%, the cards will always take up the full height of their parent container, which can help to stabilize the layout. For example, when I left the height off and clicked the "read more" button on the first card, the height of the other cards increased without revealing the text. But that's not what I wanted to happen, so it affected the JavaScript functionality.
Another thing to note is that if the .card-wrapper element does not have a defined height, the cards will take up the full height of the viewport. So add a max-height or height property to the .card-wrapper element to control the height of the cards.
Now for the fun part: JavaScript!
First, I created the function "displayText" to toggle the states of the .additional-text class to its "active" state where it will display block. And the function "positionButton" to toggle the .collapsible class where the button will reposition itself.
function displayText(index){
const additionalText = additionalTexts[index];
additionalText.classList.toggle("active");
}
function positionButton(index){
const collapsible = collapsibles[index];
collapsible.classList.toggle("active");
}
In order for the function to work properly and for us to target the corresponding text when the corresponding button is clicked, we need to pass an index parameter to the function displayText and positionButton and create variables for each using the bracketed NodeList syntax.
Example:
const additionalText = additionalTexts[index];
const collapsible = collapsibles[index];
It's important to note that in JavaScript, the querySelectorAll method returns a NodeList object. You may be asking yourself, as I was, "What is a NodeList object?"
A NodeList object is similar to an array. It contains multiple elements that you can access through the index parameter.
The collapsible variable uses this index to retrieve the corresponding collapsible element from the collapsibles nodeList object. In this case, collapsibles is a nodeList object that contains all the elements with the class collapsible. Since it contains multiple elements, we can access each element using an index, just like an array. That's why we can use the index parameter passed to the displayText function to access a specific element in the collapsibles collection.
Next, we need to access the buttons so that we can add an event listener to them. To achieve this, we use the document.querySelectorAll(".button") method, and we need to loop through all the buttons. Hence, we create a for loop:
for(let i = 0; i < collapsibles.length; i++ ){
collapsibles[i].addEventListener("click", function(){
displayText(i)
positionButton(i)
})
}
We call both functions to apply the corresponding changes to the text and button when the button is clicked.
That's how I implemented the dropdown feature using vanilla JavaScript! You can find the full code on the CodePen link below.
https://codepen.io/BibaKotev/pen/poxjJQG
If you like the article follow me on Twitter at: https://twitter.com/BiljanaCodes or connect with me on LinkedIn at: https://www.linkedin.com/in/biljana-kotevska/
Top comments (1)
Nice share 👌 💪