El acordeón jQuery más corto del mundo

¿Qué tal la semana? Últimamente yo ando muy liado -bytes por aquí, ifs por allá, debo reconocer que hasta se me cae algún que otro registro- hoy vuelvo a la carga compartiendo con vosotros un acordeón manual hecho exclusivamente con HTML y jQuery.

Acordeón

Este acordeón está basado en divs HTML, utiliza al máximo la capacidad de jQuery, y es sintátictamente correcto en tanto que no se inventa ningún atributo HTML para enviar parámetros al JavaScript.

Fíjate que los parámetros se recogen mediante expresiones regulares jQuery.

Si necesitas pues un acordeón de cuatro líneas sintáctictamente correcto para el SEO ya puedes hacer el siguiente copypaste 🙂

<!DOCTYPE html>
<html>
    <head>
        <title>Acordeón manual</title>
        <meta charset="utf-8" />
        <style>                     
            p.account {
                float: left;
                margin-right: 10px;
                font-style: italic
            }
             
            p.desc {
                color: blue;
                margin-right: 10px;
                float: left
            }
             
            p.sum {
                color: red;
                float: left
            }
             
            #madre-1, #madre-2 {
                clear:  both               
            }
             
            #madre-1 > div, #madre-2 > div {
                clear: both;
                display: none
            }           
        </style>
        <script type="text/javascript" src="public/js/jquery.js"></script>
        <script type="text/javascript">                 
            $(function() {                 
                $('div[id^=madre-]').click(function() {                     
                    var madre = $(this).attr('id').split('-');                   
                    var children = '#madre-' + madre[1] + '> div';                     
                    $(children).css('display') == 'none' ? $(children).slideDown(300) : $(children).slideUp(300);                     
                });                 
            });             
        </script>   
    </head>
    <body>
        <div id="madre-1">
            <h4>RECAUDACIÓN</h4>
            <div>
                <p class="account">437894512345</p>
                <p class="desc">Clientes recaudación y bares</p>
                <p class="sum">100,20</p>
            </div>
            <div>
                <p class="account">437894512346</p>
                <p class="desc">Otro nombre de cuenta</p>
                <p class="sum">160,20</p>
            </div>
        </div>
        <div id="madre-2">
            <h4>CLIENTES</h4>
            <div>
                <p class="account">4458295743953</p>
                <p class="desc">Company A</p>
            </div>
            <div>
                <p class="account">4584385408544</p>
                <p class="desc">Company B</p>
            </div>
            <div>
                <p class="account">45435345345344</p>
                <p class="desc">Company C</p>
            </div>           
        </div>
    </body>
</html>

Si consigues escribir un acordeón con menos líneas de código que éste envíamelo y lo publicamos aquí.