The objective was to open a panel by clicking it and show the hidden text with CSS and JS.
However, I noticed while doing the challenge that the preceding panel doesn't close when I click on another. So I decided to take care of that part by adding some code that does the functionality to turn off the sibling panels when the clicked one is open.
Let's see what I did since the beginning:
1.This is my HTML file, quite simple with one parent element - 'panels' and inside the items-'panel'.
Having made the HTML I wrote the CSS. In this exercise, it was necessary to do some CSS special Flexbox and transitions.
2.First I declared the dispaly:flex in the parent
3.In each child item -panel- I used flex:1 to receive the specified proportion of the remaining space filling the screen.
Also I added flexbox too to align and justify the child items -
- vertically using flex-direction:column.
Besides, making the general CSS of each element, I added a specific transition for the flex and for the font-size of the paragraphs. Because these two elements will be changed when clicking on the panel, its size and the size of the paragraph.
Then I created a forEach in the panels variable to add a click event listener to each panel.
In the .openPanel function, I first added the .open class with the toggle method because I wanted it to serve both to open and to close the panel.
Then I also wanted, as I said at the beginning of the text, that when you click on a panel your siblings would automatically close. So I created a 'for..of' loop that accepts the siblings variable and runs through all the panel container panels. Inside the loop, I determined an if statement asking if the siblings variable is equal to the clicked this - panel. If not then we remove the class open.
Once I finished this, I did the second part of the challenge which was to show the first paragraphs and the last paragraphs on the screen as soon as the clicked panel finished opening completely.
So I created a new listener event for each panel with the transition end event. I Requested this event because it fires when the panel transition from closed to open is over.
In the 'showFullText' function, I added the event-e in argument to see if the event's propertyName includes the word flex in the name. If so then we add class '.open-active' with the toggle method.