Question

I have a table with months as header. When clicked on month i want to display weeks in all tds of corresponding header. I am using toggle for this. How can I toggle back other elements when I click on a new header.

here is the fiddle. Here after first click it is taking two clicks to do the job. What is going wrong? Is there any other concise ways to do this.

Answer 1

Something like this?

   $(document).ready(function() {
    $('th').click(

    function() {
        // hide all expanded
        $('#ex td #td_data').show();
        $('#ex td #o_data').hide();

        // show only corresponding weeks
        $('#ex td:nth-child(' + ($(this).index() + 1) + ')').each(function(index) {
            $(this).find('#td_data').hide();
            $(this).find('#o_data').show();
        });

    });

});​

---

EDIT:

@Sami – I think I get your requirement now…

Check the modifie fiddle here – http://jsfiddle.net/johnbk/JYkS6/

-> I removed the css for #o_data

-> id for each element should be unique – changed this to class instead

-> Modified the above code like below

$('.o_data').hide();
$('.td_data').show();
$('th').click(

function() {
    var id = $(this).index() + 1;

     //loop through corresponding tds and display data
    $('#ex td:nth-child(' + id + ')').each(function(index) {
        $(this).find('.td_data').toggle();
        $(this).find('.o_data').toggle();
    });   

     //reset everything else
    $('#ex td').not(':nth-child(' + id + ')').each(function(index) {
        $(this).find('.td_data').show();
        $(this).find('.o_data').hide();
    });   

});​