Conversation
supportHow can I configure to land on past shows showing when there are no current shows it looks empty and clicking on past shows is not something the user will want to do, but something the artist wants to display nevertheless. how can this be done so when you land you see both? The page I need help with: [ log in to see the link]
I did this with a hack and css, putting 2 shortcodes <style> #loading, #events.show{ transition: opacity 0.8s ease; opacity: 1; } #loading.hidden, #events { transition: opacity 0.8s ease; opacity: 0; } #upcoming-events, #past-events, #past-events > div > div > div > a, #past-events > div > div > div > div.bit-nav-bar-container > div > div > div > a > div.bit-logo-desktop, #past-events > div > div > div > div.bit-nav-bar-container > div > span.bit-event-list-title.bit-show-upcoming.bit-clickable, #past-events > div > div > div > div.bit-nav-bar-container > div > div > div > a > div.bit-logo-mobile > svg, #upcoming-events > div > div > div > div.bit-nav-bar-container > div > span.bit-event-list-title.bit-show-past.bit-clickable { display: none; } </style> <script type="text/javascript"> window.onload = function() { setTimeout(() => { document.querySelector("#past-events > div > div > div > div.bit-nav-bar-container > div > span.bit-event-list-title.bit-show-past.bit-clickable").click(); document.getElementById("past-events").style.display="block"; document.getElementById("upcoming-events").style.display="block"; document.getElementById("loading").classList.add("hidden"); setTimeout(() => { document.getElementById("loading").style.display = "none"; document.getElementById("events").classList.add("show"); }, 1000); }, 1000); } </script> <center> <img id="loading" src="https://badrequest.band/wp-content/uploads/2023/09/loading.gif" style="width: 50px;" /> </center> <div id="events"> <div id="upcoming-events"> [bandsintown_events artist-name="Bad Request Band" font="Kanit, sans-serif" link-color="#ED5252" language="en"] </div> <div id="past-events"> [bandsintown_events artist-name="Bad Request Band" font="Kanit, sans-serif" link-color="#ED5252" language="en"] </div> </div>
I did this with a hack and css, putting 2 shortcodes <style> #loading, #events.show{ transition: opacity 0.8s ease; opacity: 1; } #loading.hidden, #events { transition: opacity 0.8s ease; opacity: 0; } #upcoming-events, #past-events, #past-events > div > div > div > a, #past-events > div > div > div > div.bit-nav-bar-container > div > div > div > a > div.bit-logo-desktop, #past-events > div > div > div > div.bit-nav-bar-container > div > span.bit-event-list-title.bit-show-upcoming.bit-clickable, #past-events > div > div > div > div.bit-nav-bar-container > div > div > div > a > div.bit-logo-mobile > svg, #upcoming-events > div > div > div > div.bit-nav-bar-container > div > span.bit-event-list-title.bit-show-past.bit-clickable { display: none; } </style> <script type="text/javascript"> window.onload = function() { setTimeout(() => { document.querySelector("#past-events > div > div > div > div.bit-nav-bar-container > div > span.bit-event-list-title.bit-show-past.bit-clickable").click(); document.getElementById("past-events").style.display="block"; document.getElementById("upcoming-events").style.display="block"; document.getElementById("loading").classList.add("hidden"); setTimeout(() => { document.getElementById("loading").style.display = "none"; document.getElementById("events").classList.add("show"); }, 1000); }, 1000); } </script> <center> <img id="loading" src="https://badrequest.band/wp-content/uploads/2023/09/loading.gif" style="width: 50px;" /> </center> <div id="events"> <div id="upcoming-events"> [bandsintown_events artist-name="Bad Request Band" font="Kanit, sans-serif" link-color="#ED5252" language="en"] </div> <div id="past-events"> [bandsintown_events artist-name="Bad Request Band" font="Kanit, sans-serif" link-color="#ED5252" language="en"] </div> </div>