CODEWITHSUNDEEP
jquery
Sami
Sami

Reputation: 4006

Jquery toggle back other elements when new toggle

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.

Upvotes: 0

Views: 375

Answers (3)

Johnbabu Koppolu
Johnbabu Koppolu

Reputation: 3252

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();
    });   

});​

Upvotes: 1

Sinan AKYAZICI
Sinan AKYAZICI

Reputation: 3952

$('th').click(function(){
    var i = $('th').index(this);
    $('tr').each(function(index){
        var x = $(this).children('td').eq(i).find('div').eq(0);
        var y = $(this).children('td').eq(i).find('div').eq(1);
        $(x).toggle();
        $(y).toggle();
    });
});
​

http://jsfiddle.net/57BmW/7/

Upvotes: 0

root
root

Reputation: 1583

http://jsfiddle.net/aKPDT/2/

JavaScript

$(document).ready(function(){
    $("th").click(function(){
        var myClass = $(this).attr("class");
          $(".col"+myClass).toggle();
    });
});

HTML

<table id='ex' border='1'>
            <thead>
                <tr>
                    <th  class="1">Jan</th>
                    <th  class="2">Feb</th>
                </tr>
            </thead>

            <tbody>
                <tr>
                    <td>
                        <div id="td_data">#11</div>
                        <div id="o_data" class="col1">
                            <span>Week1</span><span>Week2</span><span>Week3</span><span>week4</span>
                        </div>                        
                    </td>
                    <td>
                        <div id="td_data">#12</div>
                        <div id="o_data" class="col2"><span>Week1</span><span>Week2</span><span>Week3</span><span>week4</span></div>                        
                    </td>
                </tr>
                <tr>
                    <td>
                        <div id="td_data">#21</div>
                        <div id="o_data" class="col1"><span>Week1</span><span>Week2</span><span>Week3</span><span>week4</span>
                        </div>                        
                    </td>
                    <td>
                        <div id="td_data">#22</div>
                        <div id="o_data" class="col2">
                            <span>Week1</span><span>Week2</span><span>Week3</span><span>week4</span></div>
                    </td>
                </tr>
            </tbody>

        </table>

Upvotes: 0

Related Questions