Question

I have a page that queries events on a selected calendar date and groups them in an individual table for each different event type.

Obviously this list could get quite large and rather than having everything displayed and the user having to scroll a lot I was hoping I could use the toggle function to hide a list of events for an event type when they click the table header for that event type.

The issue I’m struggling to get my head around is that I have no idea how many different event types there will be for any selected date so how do I write a function that will hide only that selected event type?

Answer 1

You’re not really giving us much in your question to go on so perhaps I’m totally off with this answer.

But I think you need to add an event-type attribute to the elements that represent the events, then you can use jQuery select the elements and apply a toggle.

<style>
display-none { display:none; }
</style>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$().ready(function () {

    $('div[event-type]').toggle('display-none');

    $('div[event-type-header]').bind('click', function () {
        var eventType = $(this).attr('event-type-header');
        $('div[event-type="' + eventType + '"]').toggle('hide-event-type');
    });
});
</script>

<!-- header -->
<div event-type-header="party">toggle party</div>
<div event-type-header="auction">toggle auction</div>

<!-- content -->
<div event-type="party">party1</div>
<div event-type="auction">auction1</div>
<div event-type="party">party2</div>
<div event-type="auction">auction2</div>