CODEWITHSUNDEEP
javascriptjqueryclasshtml
user3192410
user3192410

Reputation: 1

how to switch the class of 1 element only at a time

I have this isue whenever I click a div expands, but if I click a collapsed one, both collapse and the first one returns to an inactive state, at this point the last two are both active and inactive... and if at this time I click the first one, they all expand at once. 

``
<html lang="es"><head>

<!--hojas de estilos-->
<link href="css/estilos.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
</head>
<body>
<div id="content">
<div class="column1">
    <div id="logofield">
        <img src="Logo.png">
    </div>

</div>
<div class="column2">

    <div id="division">
    </div>

    <div id="buttonwrap">
        <a href="index.html"><span id="button"><img id="home" src="home.png"></span></a>
        <a href="contact.html"><span id="button"><h3>Contacto</h3></span></a>
        <a href="products.html"><span id="button"><h3>Productos</h3></span></a>
        <a href="gallery.html"><span id="button"><h3>Galería</h3></span></a>
    </div>

    <div class="wrapper" id="main_field">

        <section class="article" id="article_wrap">
            <img id="imicon" src="user.png"><h2 id="subtitle1">QUIENES SOMOS</h2>
            <div id="imagewrap">
            <img id="icon1" src="after.png">
            <img id="icon2" src="before.png">

            <img id="frame" src="im4.jpg">              
            <p id="descriptf">
            Servcont se establece como empresa a finales del 2013, pero sus labores se inician en octubre de 1999, ofreciendo servicios de mantenimiento a grandes empresas, pero ademas de constrccion a particulares, ofreciendo siempre la mejor calidad y servicio a sus clientes a lo largo de su trayectoria. 
            </br>
            </br>
            Además de esto Servcont, ofrece productos de fabricación propia de altisima calidad, dando a sus clientes la confianza y seguridad que ellos necesitan.  </p>

            </div>

        </section>

        <section class="article" id="article_wrap">
            <img id="imicon" src="page.png"><h2 id="subtitle1">QUE HACEMOS</h2> 
            <div id="imagewrap">
            <img id="icon1" src="after.png">
            <img id="icon2" src="before.png">

            <p id="descriptf">
            Ofrecemos soluciones a los problemas de nuestros clientes, de la forma mas eficiente y eficaz, ahorrando tiempo y recursos.
            </br>
            </br>
            Realizamos obras de mantenimiento importantes, reparación de techos, cajas de luz y otros.
            </br>
            </br>
            Además de trabajos de construccion y remodelación domiciliarias, junto con instalación de termo cañones y reparaciones.</p>
            <img id="frame" src="im5.jpg">
            </div>
        </section>

        <section class="article" id="article_wrap">
            <img id="imicon" src="page.png"><h2 id="subtitle1">NUESTRA MISION</h2>      
            <div id="imagewrap">
            <img id="icon1" src="after.png">
            <img id="icon2" src="before.png">   

            <p id="descriptf">
            Entregar el mejor servicio y atraves de esto dar mayor fuerza a nuestros clientes, permitiendoles enfocar sus esfuerzos en hacer crecer sus negocios
            y no en los problemas que pudiesen presentar.
            </br>
            </br>
            Dar solucion a los problemas de nuestros clientes, de manera eficaz y rápida.
            </br>
            </br>
            Llegar a más clientes, ofreciendo nuestros servicios a quienes pudiesen necesitarlos, entregando siempre la mejor calidad.</p>
            <img id="frame" src="im6.jpg">
            </div>
        </section>

        <div id="contact_info">
            <img id="iconc" src="user.png">
            <p id="info">Victor Eduardo Millar</p>
            </br>
            <img id="iconc" src="phone.png">
            <p id="info">0000 0000</p>
            </br>
            <img id="iconc" src="mail.png">
            <p id="info">[email protected]</p>
        </div>


        <div id="timewrap">
            <a href="http://time.is/Osorno" id="time_is_link" style="font-size:26px; font-family:arial; color:white"></a>
            <img id="icont" src="time.png">
            <span id="time"><span onclick="window.location='http://time.is/Osorno'" title="http://time.is/Osorno">02:00</span></span>
            <script src="http://widget.time.is/t.js"></script>
            <script>time_is_widget.init({Osorno_z179:{time_format:"hours:minutes"}});</script>
        </div>

        <div id="hlinkbutton">

        </div>



    </div>
</div>
</div>
<script type="text/javascript">
    $(document).ready(function(){$('.wrapper section').click(function() {
    $(this).toggleClass('activo');
    $(this).siblings().not(this).toggleClass('oculto');
    });});
</script>
</body>

</html>
``

it wont work >_<

Upvotes: 0

Views: 88

Answers (2)

Terry
Terry

Reputation: 66103

Your logic needs to be refined: what you're doing is that when a section is clicked on, you are toggling one class, and its siblings are being toggled with another class — if you intend to achieve an either–or scenario, you simply have to add and remove classes instead:

$(function(){
    $('.wrapper section').click(function() {
        $(this)
        .addClass('activo')
        .removeClass('oculto')
        .siblings('section') // Probably a good idea to be a bit specific here
            .addClass('oculto')
            .removeClass('activo');
    });
});

p/s: You can totally take advantage of method chaining, one of the most powerful features of jQuery ;)

See proof on concept JSFiddle here.

Upvotes: 1

sites
sites

Reputation: 21785

Not sure about your markup, but by intuition I would say this should work:

$(this).addClass('activo').removeClass('oculto');
$(this).siblings().not(this).addClass('oculto').removeClass('activo');

Upvotes: 0

Related Questions