// Consider a array that you need to map to display it // You want to group the array content into pairs // Each pair will have: open div tag + pair of items + close div tag // To reach that, use index during the mapping, like below // Ps.: The list I have to reproduce this has 15 items var openDiv = "<div>"; var closeDiv = "</div>"; var animation = "--- collapsible content ---"; list.map((item, index) => { // call all odd indexes and last item of the list, opening the div before each one if (index % 2 === 0 || index === mealList.length - 1) { console.log(openDiv); console.log(index, item.foodItem); } // call all even numbers, closing the div after each one if (index % 2) { console.log(index, item.foodItem); console.log(closeDiv); console.log(animation); console.log(" "); } // call the last item of the list to close the div if (index === mealList.length - 1) { console.log(closeDiv); console.log(animation); } }); /* Output: <div> 0 Oven Mitt - 13 Inch 1 Lamb - Bones </div> --- collapsible content --- <div> 2 Mcguinness - Blue Curacao 3 Pumpkin - Seed </div> --- collapsible content --- <div> 4 Onions - Red Pearl 5 Wine - Rioja Campo Viejo </div> --- collapsible content --- <div> 6 Pepper - Green, Chili 7 Coffee Caramel Biscotti </div> --- collapsible content --- <div> 8 Water - Perrier 9 Bread - Multigrain </div> --- collapsible content --- <div> 10 Veal - Tenderloin, Untrimmed 11 Butcher Twine 4r </div> --- collapsible content --- <div> 12 Extract Vanilla Pure 13 Strawberries - California </div> --- collapsible content --- <div> 14 Nut - Walnut, Chopped </div> --- collapsible content --- */
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter