Accordion (basic)
Rose
A rose is a woody perennial flowering plant of the genus Rosa, in the family Rosaceae, or the flower it bears. There are over three hundred species and tens of thousands of cultivars. They form a group of plants that can be erect shrubs, climbing, or trailing, with stems that are often armed with sharp prickles. Flowers vary in size and shape and are usually large and showy, in colours ranging from white through yellows and reds.
Tulip
Tulips (Tulipa) form a genus of spring-blooming perennial herbaceous bulbiferous geophytes (having bulbs as storage organs). The flowers are usually large, showy and brightly colored, generally red, pink, yellow, or white (usually in warm colors). They often have a different colored blotch at the base of the tepals (petals and sepals, collectively), internally. Because of a degree of variability within the populations, and a long history of cultivation, classification has been complex and controversial.
Carnation
Dianthus caryophyllus, commonly known as the carnation or clove pink, is a species of Dianthus. It is probably native to the Mediterranean region but its exact range is unknown due to extensive cultivation for the last 2,000 years. Carnations require well-drained, neutral to slightly alkaline soil, and full sun. Numerous cultivars have been selected for garden planting. Typical examples include 'Gina Porto', 'Helen', 'Laced Romeo', and 'Red Rocket'. They are used for medical purposes, such as for upset stomach and fever. Their fragrance was historically used for vinegar, beer, wine, sauces and salads.
- Examine the source code to see how the accordion blocks (
<div class="block">
) are organized - Add a
click
event listener to theh3
tags:- When you click on a
h3
, the corresponding information (thediv
with the image and the paragraph) is shown (when it's not visible) or hidden (when it is visible) with a sliding motion
- When you click on a
- Make sure that your script still works if similar, additional accordion blocks are added (uncomment the lines 71-83 in accordion.html)
Tip: use the resemblance between theh3
's and thedata-id
attributes to determine which information should be shown/hidden