Adjust a script to suit Details/Summary tags


I have started using the details/summary element so that the timetable I have constructed is more user friendly on a mobile device.
@Sparrow kindly gave me a script to automatically remove expired events the day after.
Since I started wrapping the code in a details/summary tag, the expired events do not get removed.

How would I alter the script that @Sparrow supplied to get this to work.
I have included the code that I am using below, with the script at the bottom.

<!-- 4th Dec -->
    <details>
        <summary id="day-and-date" date="4-12-21">
        Saturday - 4th December                
        </summary>

            <details>
            <summary id="club">
                <img id="image-date" src="img/cooking.jpg"  alt="">
                <p id="location"> Room 8</p> 
                <p id="time">12:30PM   </p>
                <p id="event" >- Japanese Cooking </p>
            </summary>
            <div class="gallery">
                    
            <div class="image eventItem" date="4-12-21" id="jap-cook" data-name="jap-cook">
                    <span><img id="image-large" src="img/sushi-large.jpg" alt=""></span>
                    <span><img id="image-small" src="img/sushi-small.jpg" alt=""></span>
                    <h4 id="pinboard-day"><a href="structures/Japanese-class-times.pdf" target=“_blank” ><i class="fa fa-file-pdf-o" title="Timetable"   aria-hidden="true"></i></a>Saturday arvo</h4>
                    <h4 id="pinboard-date" >4th December</h4>
                    <p id="pinboard-text"><b> Japanese Cooking </b> </p>
                    <p id="pinboard-text2"><b><br></b></p>
                    <p id="pinboard-supplies">All ingredients supplied</p>
                    <p id="pinboard-cost">$55</p>
                    <p id="pinboard-start">12:30PM Start</p>
                  <div class="card-bottom">
                    <img id="card-bottom-smith-image" src="img/jap-cook-bottom.jpg" alt="">
                        <p class="card-text-bottom">
                            Cooking Classes 
                        <br>12 Smith St                            
                        <br>  Anywhere
                        </p>
                    </div>
                </div>        

            </div>
            </details>

            <details>
            <summary id="club">
                <img id="image-date" src="img/cooking.jpg"  alt="">
                <p id="location"> Room 10</p> 
                <p id="time">1:30PM   </p>
                <p id="event" >- French Cooking </p>
            </summary>
            <div class="gallery">
                    
                <div class="image eventItem" date="4-12-21" id="french-cook" data-name="french-cook">
                    <span><img id="image-large" src="img/bagette-large.jpg" alt=""></span>
                    <span><img id="image-small" src="img/bagette-small.jpg" alt=""></span>
                    <h4 id="pinboard-day"><a href="structures/French-class-times.pdf" target=“_blank” ><i class="fa fa-file-pdf-o" title="Timetable"   aria-hidden="true"></i></a>Saturday arvo</h4>
                    <h4 id="pinboard-date" >4th December</h4>
                    <p id="pinboard-text"><b> French Cooking </b> </p>
                    <p id="pinboard-text2"><b><br></b></p>
                    <p id="pinboard-supplies">All ingredients supplied</p>
                    <p id="pinboard-cost">$35</p>
                    <p id="pinboard-start">1:30PM Start</p>
                  <div class="card-bottom">
                    <img id="card-bottom-smith-image" src="img/french-cook-bottom.jpg" alt="">
                        <p class="card-text-bottom">
                            Cooking Classes 
                        <br>12 Smith St                            
                        <br>  Anywhere
                        </p>
                    </div>
                    </div>        

                </div>
            </details>

            <details>
            <summary id="club">
                <img id="image-date" src="img/cooking.jpg"  alt="">
                <p id="location"> Room 3</p> 
                <p id="time">5:30PM   </p>
                <p id="event" >- Cheese making </p>
            </summary>
            <div class="gallery">
                    
                <div class="image eventItem" date="4-12-21" id="cheese-cook" data-name="cheese-cook">
                    <span><img id="image-large" src="img/cheese-large.jpg" alt=""></span>
                    <span><img id="image-small" src="img/cheese-small.jpg" alt=""></span>
                    <h4 id="pinboard-day"><a href="structures/Cheese-class-times.pdf" target=“_blank” ><i class="fa fa-file-pdf-o" title="Timetable"   aria-hidden="true"></i></a>Saturday arvo</h4>
                    <h4 id="pinboard-date" >4th December</h4>
                    <p id="pinboard-text"><b> Cheese making </b> </p>
                    <p id="pinboard-text2"><b><br></b></p>
                    <p id="pinboard-supplies">Please bring your own milk</p>
                    <p id="pinboard-cost">$15</p>
                    <p id="pinboard-start">5:30PM Start</p>
                  <div class="card-bottom">
                    <img id="card-bottom-smith-image" src="img/cheese-cook-bottom.jpg" alt="">
                        <p class="card-text-bottom">
                            Cooking Classes 
                        <br>12 Smith St                            
                        <br>  Anywhere
                        </p>
                     </div>
                    </div>        
 
                </div>
            </details>
    </details>

    <!-- 6th Dec -->
    <details>
        <summary id="day-and-date" date="6-12-21">
        Monday - 6th December                
        </summary>

        <details>
            <summary id="club">
                <img id="image-date" src="img/cooking.jpg"  alt="">
                <p id="location"> Room 5</p> 
                <p id="time">12:30PM   </p>
                <p id="event" >- Japanese Cooking </p>
            </summary>
            <div class="gallery">
                    
                <div class="image eventItem" date="6-12-21" id="jap-cook" data-name="jap-cook">
                    <span><img id="image-large" src="img/sushi-large.jpg" alt=""></span>
                    <span><img id="image-small" src="img/sushi-small.jpg" alt=""></span>
                    <h4 id="pinboard-day"><a href="structures/Japanese-class-times.pdf" target=“_blank” ><i class="fa fa-file-pdf-o" title="Timetable"   aria-hidden="true"></i></a>Saturday arvo</h4>
                    <h4 id="pinboard-date" >4th December</h4>
                    <p id="pinboard-text"><b> Japanese Cooking </b> </p>
                    <p id="pinboard-text2"><b><br></b></p>
                    <p id="pinboard-supplies">All ingredients supplied</p>
                    <p id="pinboard-cost">$55</p>
                    <p id="pinboard-start">12:30PM Start</p>
              <div class="card-bottom">
                    <img id="card-bottom-smith-image" src="img/jap-cook-bottom.jpg" alt="">
                        <p class="card-text-bottom">
                            Cooking Classes 
                        <br>12 Smith St                            
                        <br>  Anywhere
                        </p>
                    </div>
                </div>        

             </div>
        </details>
</details>


   `enter code here` <!-- DELETES EVENTS AFTER THE DATE HAS PAST -->
                 <script>

                    const htmlDateSettings = {
                        "date-format": "d-m-y",
                        "date-devider": "-"
                    }
    
                    removeExpiredEvents(); // call function automatically
    
                    function removeExpiredEvents() {
                        let eventItems = Array.from(document.querySelectorAll('.eventItem'));
                        let df = htmlDateSettings['date-format'];
                        let dd = htmlDateSettings['date-devider'];
                        let msInOneDay = 1000 * 60 * 60 * 24;
                        let today = new Date().getTime();
    
                        for(let eventItem of eventItems) {
                            let date = eventItem.getAttribute('date');
                            if(!date) continue;
    
                            date = date.split(dd);
                            let dateFormat = df.split(dd);
    
                            let filteredDate = `${date[dateFormat.indexOf('m')]}/${date[dateFormat.indexOf('d')]}/${date[dateFormat.indexOf('y')]}`
                            filteredDate = new Date(filteredDate).getTime();
                            filteredDate = filteredDate + msInOneDay; // increased 1 day in event date
                        
                            if(today > filteredDate) eventItem.style.display = 'none'; 
                        }
                    }
    
                </script>

Source: JavaSript – Stack Overflow

November 30, 2021
Category : News
Tags: javascript

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.