Skip to main content

Preview a limited number of dates

Display only the next N dates so a tour doesn't overwhelm your front page

Pete Stormer avatar
Written by Pete Stormer
Updated over 6 years ago

To display only a certain number of dates, include this style block on the page. 

<style>
   .seated-event-row:nth-child(n+6)  
      {display:none !important}
</style>

This example displays the next 5 dates.  To change the number to display, just adjust the number after "n+".  For example to show 10 dates, you'd write (n+11) instead of (n+6).  

You can see this in action on Trace Adkins site.

Notes:

  • To display the preview, make to install your tour listings twice: once on the page with your tour preview with the above style line and once on your full tour page.

  • You'll want to include a button with a link to view all tour dates right below your limited preview.  The way to add a button depends on your site, but you can find a broad overview here.  Please reach out to your account manager with any questions!

Did this answer your question?