slideToggle con classToggle

Question

Tengo una tabla y me gustaría contraer la siguiente línea si hago clic en el encabezado. Además, me gustaría cambiar la clase si la tabla está contraída o no.

Yo escribí esto:

$('th').click(function(){
        var $el = $(this)
        $(this).closest('tr').next().slideToggle(0)
        if($(this).closest('tr').next().is(':visible')) {
           $el.addClass   ('opened');
           $el.removeClass('closed');
        } else {
           $el.removeClass   ('opened');
           $el.addClass      ('closed');
        }
});

Me pregunto si puedo hacerlo mejor con JQuery.

Aquí está el código HTML:

<table>
    <tr>
        <th colspan="2">Line 1</th>
    </tr>
    <tr>
        <td>data</td>
        <td>data</td>
    </tr>
    <tr>
        <th colspan="2">Line 2</th>
    </tr>
    <tr>
        <td>date</td>
        <td>data</td>
    </tr>
</table>

Y el css:

.opened {
    background-image: url("bullet_toggle_minus.png");
    background-repeat: no-repeat;
    background-position: left center;
}

.closed {
    background-image: url("bullet_toggle_plus.png");
    background-repeat: no-repeat;
    background-position: left center;
}

javascript jquery html collapse

0

nowox 5 sep. 2014 a las 13:48

Answer 1

Puede usar toggleClass con varias clases:

$('th').click(function () {
    var $el = $(this)
    $el.closest('tr').next().slideToggle(0);
    $el.toggleClass('opened closed');
});

Recuerde configurar el estado inicial de todos los elementos configurando la clase en th como:

<th colspan="2" class="opened">Line 1</th>

Demostración: http://jsfiddle.net/r0xpbqea/

3

Irvin Dominin 5 sep. 2014 a las 10:16

Answer 2

Script

$('th').click(function() {
        var $el = $(this);
        $(this).closest('tr')
               .next()
               .slideToggle(0)
               .toggleClass('closed');
});

Estilo

tr {
    background-image: url("bullet_toggle_minus.png");
    background-repeat: no-repeat;
    background-position: left center;
}

tr.closed {
    background-image: url("bullet_toggle_plus.png");
    background-repeat: no-repeat;
    background-position: left center;
}

Fiddle: http://jsfiddle.net/teh94dma/

-1

JofryHS 5 sep. 2014 a las 09:55

Answer 3

$('tr').addClass('opened');
$('th').click(function(){
        var $el = $(this)
        $(this).closest('tr').next().slideToggle(0).toggleClass('opened closed');
});

Css

tr {
    background-repeat: no-repeat;
    background-position: left center;
}

.opened {
    background-image: url("bullet_toggle_minus.png");
}

.closed {
    background-image: url("bullet_toggle_plus.png");
}

0

AhmadAssaf 5 sep. 2014 a las 09:57

slideToggle con classToggle

3 respuestas

Preguntas relacionadas

Nuevas preguntas

javascript