I am trying to code a section in HTML where you click a div it will expand its contents and other divs will toggle/hide. This is what I have and it is working perfectly:
If I click in the Personaliza title it will expand its contents and toggle/hide the other two titles.
Check the website in the third section: https://uniformaguatemalapruebas.herokuapp.com/
I am trying to add an icon - when the div is selected or expanded and the other two will show + icon. And If I click any title it will show + others will show -. If none are expanded they all will show +.
My issue is very simple but I am struggling at this.
This is what I have so far:
<section id="about-us">
<div class="container">
<div class="row">
<div class="col-6 col-12-narrower ">
<div class="quienes-somos contr">
<div class="container-aboutus">
<!-- <div>
<p class="title-h5">
"Lo más importante no es destacar,
<br/>
es ser recordado"
</p>
</div> -->
<div class="title-big">
<h2>¿Quiénes somos?</h2>
</div>
<div class="hr-aboutus"></div>
<div id="aboutus-texts">
<div class="uniforma-text">
<div class="main-title">
<h4>Unifica
<span><i class="fas fa-minus iconshow" style="float: right; margin-right: 1em;"></i></span>
</h4>
</div>
<div class="item" id="active-item">
<p>
Uniforma Guatemala es una empresa 100% Guatemalteca con experiencia en la industria de la confección de uniformes. Lo conformamos un equipo de colaboradores con más de dos décadas de experiencia, lo que nos permite el criterio adecuado para la correcta asesoría en cuanto a imagen y materias primas.
Estamos altamente capacitados para la buena atención a nuestros clientes y comprometidos a mantener altos estándares en la fabricación de Uniformes.
Ofrecemos a nuestros clientes soluciones integrales y MODA.
</p>
</div>
</div>
<div class="uniforma-text">
<div class="main-title">
<h4>Personaliza</h4>
</div>
<div class="item">
<p>
Sabemos que las empresas son el motor de la economía y que día a día requieren de mejoras en su imagen para integrarse a las nuevas exigencias de un mercado cambiante y competitivo.
Conocemos de moda y tendencias por eso diseñamos nuestros Uniformes dándoles un toque personal e innovador para cada institución.
Ofrecemos soluciones completas y que se adapten a las necesidades específicas.
</p>
</div>
</div>
<div class="uniforma-text">
<div class="main-title">
<h4>Identifica</h4>
</div>
<div class="item">
<p>
Sabemos que la imagen y seguridad de los trabajadores debe estar respaldada por la calidad de los Uniformes, por lo que mantenemos altos estándares en la fabricación por producto, esto nos permite garantizar todas nuestras prendas.
Costuras pequeñas y reforzadas para su alta durabilidad y comodidad en el ambiente laboral.
Todas nuestras prendas tienen garantía contra defecto de fabricación.
</p>
</div>
</div>
</div>
<div class="contact-button-aboutus">
<button class="button danger">
<span>Contactar</span>
</button>
</div>
</div>
</div>
</div>
<div class="col-6 col-12-narrower uniforma-main-image-tr">
<div class="quienes-somos">
<div class="image featured">
<h1>
<img src="/images/esta133.jpeg" alt="para-quien-hace-de-su-labor-una-pasion-dia-con-dia"/>
</h1>
</div>
</div>
</div>
</div>
</div>
</section>
Javascript:
// toggle on the first title when page loads
$('#aboutus-texts .uniforma-text .item p').hide();
$('#active-item p').toggle();
//if I click any title it will expand itself and toggle off others.
$('#aboutus-texts .uniforma-text .main-title ').click(function(e){
e.preventDefault();
var block = $(this).parent().find('p');
$("#aboutus-texts .uniforma-text .item p").not(block).hide();
block.toggle(200);
});
PD: I am using Font awesome for icons.
maybe you can try this
// toggle on the first title when page loads
$('#aboutus-texts .uniforma-text .item p').hide();
$('#active-item p').toggle();
const setIcon = (icon, show) => {
if (show) {
icon.removeClass("fa-plus");
icon.addClass("fa-minus");
} else {
icon.removeClass("fa-minus");
icon.addClass("fa-plus");
}
}
$('#aboutus-texts .uniforma-text .main-title ').click(function(e) {
const block = $(this).parent().find('p');
const icon = $(this).find(".iconshow");
setIcon(icon, icon.hasClass("fa-plus"));
$("#aboutus-texts .uniforma-text .item p").not(block).hide();
$("#aboutus-texts .uniforma-text .item p").not(block).each((i, item) => {
const icon = $(item).parent().parent().find(".iconshow");
setIcon(icon, false);
});
block.toggle();
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script>
<section id="about-us">
<div class="container">
<div class="row">
<div class="col-6 col-12-narrower ">
<div class="quienes-somos contr">
<div class="container-aboutus">
<!-- <div>
<p class="title-h5">
"Lo más importante no es destacar,
<br/>
es ser recordado"
</p>
</div> -->
<div class="title-big">
<h2>¿Quiénes somos?</h2>
</div>
<div class="hr-aboutus"></div>
<div id="aboutus-texts">
<div class="uniforma-text">
<div class="main-title">
<h4>Unifica
<span><i class="fas fa-minus iconshow" style="float: right; margin-right: 1em;"></i></span>
</h4>
</div>
<div class="item" id="active-item">
<p>
Uniforma Guatemala es una empresa 100% Guatemalteca con experiencia en la industria de la confección de uniformes. Lo conformamos un equipo de colaboradores con más de dos décadas de experiencia, lo que nos permite el criterio adecuado para la correcta asesoría en cuanto a imagen y materias primas.
Estamos altamente capacitados para la buena atención a nuestros clientes y comprometidos a mantener altos estándares en la fabricación de Uniformes.
Ofrecemos a nuestros clientes soluciones integrales y MODA.
</p>
</div>
</div>
<div class="uniforma-text">
<div class="main-title">
<h4>Personaliza
<span><i class="fas fa-plus iconshow" style="float: right; margin-right: 1em;"></i></span>
</h4>
</div>
<div class="item">
<p>
Sabemos que las empresas son el motor de la economía y que día a día requieren de mejoras en su imagen para integrarse a las nuevas exigencias de un mercado cambiante y competitivo.
Conocemos de moda y tendencias por eso diseñamos nuestros Uniformes dándoles un toque personal e innovador para cada institución.
Ofrecemos soluciones completas y que se adapten a las necesidades específicas.
</p>
</div>
</div>
<div class="uniforma-text">
<div class="main-title">
<h4>Identifica
<span><i class="fas fa-plus iconshow" style="float: right; margin-right: 1em;"></i></span>
</h4>
</div>
<div class="item">
<p>
Sabemos que la imagen y seguridad de los trabajadores debe estar respaldada por la calidad de los Uniformes, por lo que mantenemos altos estándares en la fabricación por producto, esto nos permite garantizar todas nuestras prendas.
Costuras pequeñas y reforzadas para su alta durabilidad y comodidad en el ambiente laboral.
Todas nuestras prendas tienen garantía contra defecto de fabricación.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Related
I have a list of div, each div with a button. When I click a button a text is displayed, and when I click out, the info hides with focus out function. If I have a button opened and I want to click a parent button, it's work's well, the button that was opened closes and the new button that I pressed open at the same time. The problem is when I want to do this action with a button that is next, it's don't do the two things and the same time (focus out and click the new button). Live example to check it: https://www.lagaleramagazine.es/
$(".p1").hide();
$(".p1-img").hide();
$(".btn1").click(function() {
if ($.trim($(this).text()) === 'Más detalles') {
$(this).text('Menos detalles');
} else {
$(this).text('Más detalles');
}
$(this).focusout(function() {
$(".p1").hide();
$(".p1-img").hide();
$(this).text('Más detalles');
});
var $p1 = $(this).next(".p1").toggle();
var $p1img = $(this).parents().eq(4).find(".p1-img").toggle();
$(".p1").not($p1).hide();
$(".p1-img").not($p1img).hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="event-56092" class="ect-list-post ect-featured-event data-parent-post-id=" 56053 ""="">
<div class="ect-list-post-left ">
<div class="ect-list-img" style="background-image:url('https://www.lagaleramagazine.es/wp-content/uploads/2019/01/50008823_1936412149789348_6701274349090897920_n-1024x715.jpg');background-size:cover;background-position:center center;">
<a href="https://www.lagaleramagazine.es/agenda/vi-escuelas-deportivas-para-mayores/2019-02-25/" title="Imagen del evento" alt="Magazine 1" rel="bookmark">
<div class="ect-list-date">
<div class="ect-date-area default-schedule">
<span class="ev-day">25</span>
<span class="ev-mo">febrero</span>
<span class="ev-yr">2019</span>
</div>
</div>
</a>
</div>
</div>
<div class="ect-list-post-right">
<div class="ect-list-post-right-table">
<div class="ect-list-description">
<h2 class="ect-list-title">
<a class="ect-event-url" href="https://www.lagaleramagazine.es/agenda/vi-escuelas-deportivas-para-mayores/2019-02-25/" title="VI Escuelas Deportivas para Mayores" rel="bookmark">VI Escuelas Deportivas para Mayores</a>
</h2>
<button class="btn1 button-more svg">Más detalles</button>
<div class="p1" style="display: none;">
<div class="ect-event-content">
<p>Desde el lunes 21 de enero y hasta el martes 18 de junio, todos los socios de los Centros Municipales de Mayores que participan en la XXIII Campaña de Atención al Mayor, podrán inscribirse en las diferentes actividades de la VI Escuelas Deportivas
para mayores. Se impartirán clases de pádel, tenis de mesa, petanca, rutas...</p>
Ir al evento »
</div>
</div>
</div>
<div class="p1-venue">
<div class="ect-list-venue default-venue">
<span class="ect-icon">
<i class="fa fa-map-marker" aria-hidden="true"></i>
</span>
<span class="ect-venue-details ect-address">
Area de atención al Mayor , Ayuntamiento de Badajoz,
<span class="tribe-address">
<span class="tribe-locality">Badajoz</span>
<span class="tribe-delimiter">,</span>
<abbr class="tribe-region tribe-events-abbr" title="Badajoz">Badajoz</abbr>
<span class="tribe-country-name">España</span>
</span>
</span>
<span class="ect-google">
<a class="tribe-events-gmap" href="https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=Badajoz+Badajoz+Espa%C3%B1a" title="Click para ver mapa de Google" target="_blank">+ Google Map</a>
</span>
<div class="ect-rate-area">
<span class="ect-rate-icon">
<i class="fa fa-money" aria-hidden="true"></i>
</span>
<span class="ect-rate">Gratuito</span>
</div>
</div>
</div>
</div>
</div>
</div>
I suggest you can remove the focusout functionality and use click event only since its more accessible. Please check the example below.
Note: The reason why focusout is not working for you is that you are targeting a global class .p1 and hiding it, which is basically hiding the other p tags as well.
$(".btn1").click(function() {
if ($.trim($(this).text()) === 'Más detalles') {
$(this).text('Menos detalles');
} else {
$(this).text('Más detalles');
}
var $p1 = $(this).next(".p1");
var $p1img = $(this).parents().eq(4).find(".p1-img");
$p1.toggle();
$p1img.toggle();
$(".p1").not($p1).hide();
$(".p1-img").not($p1img).hide();
});
.p1,
.p1-img {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="event-55758" class="ect-list-post ect-featured-event data-parent-post-id=" 51063 ""="">
<div class="ect-list-post-left ">
<div class="ect-list-img" style="background-image:url('https://www.lagaleramagazine.es/wp-content/uploads/2019/01/timthumb.jpg');background-size:cover;background-position:center center;">
<a href="https://www.lagaleramagazine.es/agenda/exposicion-16-personajes-que-maravillan-y-miguel-de-cervantes/2019-02-26/" title="Imagen del evento" alt="Magazine 1" rel="bookmark">
<div class="ect-list-date">
<div class="ect-date-area default-schedule"> <span class="ev-day">26</span> <span class="ev-mo">febrero</span> <span class="ev-yr">2019</span></div>
</div>
</a>
</div>
</div>
<div class="ect-list-post-right">
<div class="ect-list-post-right-table">
<div class="ect-list-description">
<h2 class="ect-list-title"><a class="ect-event-url" href="https://www.lagaleramagazine.es/agenda/exposicion-16-personajes-que-maravillan-y-miguel-de-cervantes/2019-02-26/" title="Exposición : “16 personajes que maravillan y … Miguel de Cervantes”." rel="bookmark">Exposición : “16 personajes que maravillan y … Miguel de Cervantes”.</a></h2>
<button class="btn1 button-more svg">Más detalles</button>
<div class="p1" style="display: none;">
<div class="ect-event-content">
<p>El próximo 11 de enero, se inaugurará en la Biblioteca Pública del Estado "Bartolomé J. Gallardo" de Badajoz , esta exposición que traza la vida literaria de Miguel de Cervantes(1547-1616), a través de un recorrido por su propia
obra y acompañado de otros 16 personajes que conmemoran la muerte del autor, incluyendo la presencia del novelista en...</p> <a href="https://www.lagaleramagazine.es/agenda/exposicion-16-personajes-que-maravillan-y-miguel-de-cervantes/2019-02-26/"
class="ect-events-read-more" rel="bookmark">Ir al evento »</a></div>
</div>
</div>
<div class="p1-venue">
<div class="ect-list-venue default-venue"><span class="ect-icon"><i class="fa fa-map-marker" aria-hidden="true"></i></span> <span class="ect-venue-details ect-address"><span class="tribe-address"><span class="tribe-locality">Badajoz</span><span class="tribe-delimiter">,</span><abbr class="tribe-region tribe-events-abbr"
title="Badajoz">Badajoz</abbr><span class="tribe-country-name">España</span></span>
</span><span class="ect-google"><a class="tribe-events-gmap" href="https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=Badajoz+Badajoz+Espa%C3%B1a" title="Click para ver mapa de Google" target="_blank">+ Google Map</a></span></div>
</div>
</div>
</div>
</div>
<!-- second -->
<div id="event-58349" class="ect-list-post ect-simple-event data-parent-post-id=" 58345 ""="">
<div class="ect-list-post-left ">
<div class="ect-list-img" style="background-image:url('https://www.lagaleramagazine.es/wp-content/uploads/2019/02/cropped-32396-vegetables-1920x1200-photography-wallpaper.jpg');background-size:cover;background-position:center center;">
<a href="https://www.lagaleramagazine.es/agenda/come-con-la-cabeza-no-con-la-boca-charlas-para-ninos/2019-02-26/" title="Imagen del evento" alt="Magazine 1" rel="bookmark">
<div class="ect-list-date">
<div class="ect-date-area default-schedule"> <span class="ev-day">26</span> <span class="ev-mo">febrero</span> <span class="ev-yr">2019</span></div>
</div>
</a>
</div>
</div>
<div class="ect-list-post-right">
<div class="ect-list-post-right-table">
<div class="ect-list-description">
<h2 class="ect-list-title"><a class="ect-event-url" href="https://www.lagaleramagazine.es/agenda/come-con-la-cabeza-no-con-la-boca-charlas-para-ninos/2019-02-26/" title="Come con la cabeza, no con la boca – Charlas para niños" rel="bookmark">Come con la cabeza, no con la boca – Charlas para niños</a></h2>
<button class="btn1 button-more svg"><span>Más detalles</span></button>
<div class="p1" style="display: none;">
<div class="ect-event-content">
<p>Fundación CB lanza de nuevo una campaña para educar y concienciar a los niños y padres sobre la importancia de seguir unos hábitos alimenticios saludables. Por la mañana se ofrecerán las charlas a los alumnos y por la tarde a los padres interesados
en ampliar conocimientos sobre buenos alimentos, enfermedades relacionadas con una mala alimentación,...</p> <a href="https://www.lagaleramagazine.es/agenda/come-con-la-cabeza-no-con-la-boca-charlas-para-ninos/2019-02-26/" class="ect-events-read-more"
rel="bookmark">Ir al evento »</a></div>
</div>
</div>
<div class="p1-venue">
<div class="ect-list-venue default-venue"><span class="ect-icon"><i class="fa fa-map-marker" aria-hidden="true"></i></span> <span class="ect-venue-details ect-address">Fundación CB,<span class="tribe-address"><span class="tribe-street-address">C/ Pablo Sorozábal, s/nº1,</span> <br> <span class="tribe-locality">Badajoz</span><span class="tribe-delimiter">,</span><abbr class="tribe-region tribe-events-abbr" title="Badajoz">Badajoz</abbr><span class="tribe-postal-code">06006</span><span class="tribe-country-name">España</span></span>
</span><span class="ect-google"><a class="tribe-events-gmap" href="https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=C%2F+Pablo+Soroz%C3%A1bal%2C+s%2Fn%C2%BA1%2C+Badajoz+Badajoz+06006+Espa%C3%B1a" title="Click para ver mapa de Google" target="_blank">+ Google Map</a></span>
<div class="ect-rate-area"><span class="ect-rate-icon"><i class="fa fa-money" aria-hidden="true"></i></span> <span class="ect-rate">Gratuito</span></div>
</div>
</div>
</div>
</div>
</div>
I created a modal window on my site.
At the bottom of the modal, there is a green button "Visiter" which starts the tour "Bootstrap Tour".
I want that when the tour starts, the modal window will close automatically.
The page of my site, you have to click on "Comment ça marche ?"
https://www.s1biose.com/page/qui-sommes-nous
I created a JS file in my theme :
(function ($) {
$('.bs-tour-action-trigger').on('click', function () {
$('#comment-ca-marche').collapse('hide');
});
})(window.jQuery);
Here is the code of the "Bootstrap Tour" button :
<div id="bs-tour-action-trigger-wrapper">
{% if block_settings %}
{% if block_settings.type == 'text' %}
<span class="bs-tour-action-trigger" >{{ block_settings.text }}</span>
{% elseif block_settings.type == 'button' %}
<input class="bs-tour-action-trigger" type="button" value="{{ block_settings.text }}" />
{% endif %}
{% endif %}
</div>
The problem is that when I leave the tour, the screen remains gray and clicks are not allowed.
What's wrong ?
Here is the html code of my modal window :
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#comment-ca-marche">
Comment ça marche ?
</button>
<!-- Modal -->
<div class="modal fade" id="comment-ca-marche" tabindex="-1" role="dialog" aria-labelledby="Comment ça marche ?">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Comment ça marche ?</h4>
</div>
<div class="modal-body">
<p>S1BIOSE est un site communautaire regroupant des particuliers et des professionnels autour du thème du bien-être.</p>
<p>Simple et épuré il est très facile à utiliser. S1BIOSE met l'accent sur le respect de la vie privée, vous pouvez à tout moment supprimer votre compte et vos publications.</p>
<p>Sachez que le site est compatible avec tous les appareils ayant une taille d'écran égale ou supérieure à 5 pouces.</p>
<h3>Que pouvez-vous faire sur le site ?</h3>
<p><u><strong>Tout le monde peut :</strong></u></p>
<p>Cliquer sur les boutons "J'aime" présent sur les boutiques, groupes et différents contenus. Celui-ci affiche des paramètres permettant de suivre l'activité d'une page ou tout simplement de l'ajouter à ses favoris.</p>
<p>Lorsqu'une activité se produit sur une page que vous aimez, vous recevez une notification dans votre messagerie instantanée.</p>
<p> </p>
<p>Créer un <strong>profil personnel</strong> <em>(EXEMPLE)</em>. Il est activé lors de votre inscription et permet</p>
<ul>
<li>d'être contacté et prendre contact avec les autres utilisateurs à l'aide de la messagerie instantanée.</li>
<li>présenter toutes vos publications et centres d'intérêt.</li>
</ul>
<p>Créer plusieurs <strong>groupes personnels </strong><em>(EXEMPLE)</em> et y publier les contenus suivants</p>
<ul>
<li>Annonces <em>(EXEMPLE)</em>, vous ne pouvez pas vendre mais donner des objets en bon état dont vous n'avez plus besoin et ainsi évité de jeter.</li>
<li>Articles <em>(EXEMPLE)</em>, pour partager votre passion et vos connaissances.</li>
<li>Discussions <em>(EXEMPLE)</em>, avec d'autres utilisateurs sur divers sujets.</li>
<li>Événements <em>(EXEMPLE)</em>, pour sortir en famille et rencontrer les producteurs / artisans locaux sur des marchés par exemple.</li>
<li>Itinéraires <em>(EXEMPLE)</em>, pour faire découvrir les circuits de randonnée et les lieux à visiter dans votre région.</li>
<li>Recettes <em>(EXEMPLE)</em>, pour une cuisine saine.</li>
</ul>
<p>Créer une <strong>boutique personnel</strong><strong>le</strong> <em>(EXEMPLE) </em>si vous êtes non professionnel (pas de vente en ligne pour les particuliers), qui vous permettra de présenter vos</p>
<ul>
<li>Produits <em>(EXEMPLE)</em>, si vous vendez un bien (exemple : savon, miel, huile essentielle, ...).</li>
<li>Services <em>(EXEMPLE)</em>, si vous vendez une prestation (exemple : massage, stage, sophrologie, ...).</li>
</ul>
<p> </p>
<p><u><strong>Les professionnels peuvent en plus :</strong></u></p>
<p>Créer un <strong>groupe professionnel</strong> <em>(EXEMPLE)</em> (destiné aux associations, comité, entreprise, office du tourisme). Il est identique aux groupes personnels et vous pouvez y publier les mêmes contenus. Il a la particularité d'avoir en plus</p>
<ul>
<li>Une présentation complète de votre activité (adresse, numéro de téléphone, courriel, horaire, carte, diaporama, description de l'activité, ...).</li>
</ul>
<p>Créer une <strong>boutique professionnelle</strong> <em>(EXEMPLE)</em>. Elle est identique aux boutiques personnelles et vous pouvez y publier les mêmes contenus. Elle a la particularité d'avoir en plus</p>
<ul>
<li>
<p>Une présentation complète de votre activité (adresse, numéro de téléphone, courriel, horaire, carte, diaporama, description de l'activité, ...).</p>
</li>
<li>
<p>La possibilité d'activer la vente en ligne.</p>
</li>
</ul>
<h3>Comment est rémunère le site ?</h3>
<p>S1BIOSE est rémunéré grâce aux boutiques professionnelles qui active la vente en ligne. Cette option n'est pas gratuite. Elle est bien sûr facultative.</p>
<p>Si vous êtes intéressé, vous trouverez plus d'informations sur cette page.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
<button type="button" class="btn btn-primary bs-tour-action-trigger">Visiter</button>
</div>
</div>
</div>
</div>
Read the Bootstrap modal docs. You would use the Modal hide method, not the Collapse hide method.
$('.bs-tour-action-trigger').on('click', function () {
$('#comment-ca-marche').modal('hide');
});
Hello I'm trying to make an accordion for a FAQ section on a page using Jquery but I can't seem to get it right.
What I want to do is when the plus icon is clicked all opened reply boxes have to slide up and the one I clicked has to slide up.
Here is my code:
$(document).ready(function(){
var open;
$(".faq_reply_container").slideUp();
$(".faq_show_icon").click(function(){
$(".faq_reply_container").slideUp();
open = $(this).nextAll("first:faq_reply_container");
open.slideToggle();
});
});
.faq_container{width:100%; height:auto; display:flex; flex-direction:column;}
.faq_question_reply_container{width:100%; height:auto; outline:2px solid #00BDE7; margin:5px 0px 5px 0px; }
.faq_question_container{outline:2px solid #00BDE7; background-color:white; width:100%; height:45px; display:flex; align-items:center; padding-left:15px; justify-content:space-between;}
.faq_question{font-family:Rubik; font-weight:600; color:rgba(0, 0, 0, 1.0); font-size:18px;}
.faq_show_icon{width:39px; height:39px; outline:1px solid rgba(0, 0, 0, 0.2); margin-right:3px; display:flex; justify-content:center; align-items:center; font-weight:900; color:rgba(0, 0, 0, 1.0); font-size:50px;}
.faq_show_icon:hover{cursor:pointer; background-color:#F5F5F5;}
.faq_reply_container{width:100%; height:auto; padding:15px 45px 15px 15px; background-color:#F5F5F5;}
.faq_reply{font-family:Patua One; color:rgba(0, 0, 0, 0.8); font-size:15px; line-height:23px;}
.article_container{width:77%; height:100%; padding:15px 15px 15px 15px; overflow:hidden;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="article_container" style="">
<div class="faq_container" style="">
<div class="faq_question_reply_container" style="">
<div class="faq_question_container" style="">
<span class="faq_question" style="">¿Esto es una prefunta seria asi que espero una respuesta seria?</span>
<div class="faq_show_icon" style="">+</div>
</div>
<div class="faq_reply_container" style="">
<p class="faq_reply" style="">Waynabox es una nueva forma de viajar por Europa. Te escaparás durante tres días a una ciudad sorpresa desde 150€, con vuelos de ida y vuelta y alojamiento incluidos.Descarta las ciudades que no quieres visitar (una gratuïta y, las siguientes, por 5€ cada una) y haz tu reserva. Dos días antes de salir, te mandaremos los billetes y descubrirás cuál es tu ciudad. ¡Atrévete a vivir tu próxima aventura este fin de semana!</p>
</div>
</div>
<div class="faq_question_reply_container" style="">
<div class="faq_question_container" style="">
<span class="faq_question" style="">¿Esto es una prefunta seria asi que espero una respuesta seria?</span>
<div class="faq_show_icon" style="">+</div>
</div>
<div class="faq_reply_container" style="">
<p class="faq_reply" style="">Waynabox es una nueva forma de viajar por Europa. Te escaparás durante tres días a una ciudad sorpresa desde 150€, con vuelos de ida y vuelta y alojamiento incluidos.Descarta las ciudades que no quieres visitar (una gratuïta y, las siguientes, por 5€ cada una) y haz tu reserva. Dos días antes de salir, te mandaremos los billetes y descubrirás cuál es tu ciudad. ¡Atrévete a vivir tu próxima aventura este fin de semana!</p>
</div>
</div>
<div class="faq_question_reply_container" style="">
<div class="faq_question_container" style="">
<span class="faq_question" style="">¿Esto es una prefunta seria asi que espero una respuesta seria?</span>
<div class="faq_show_icon" style="">+</div>
</div>
<div class="faq_reply_container" style="">
<p class="faq_reply" style="">Waynabox es una nueva forma de viajar por Europa. Te escaparás durante tres días a una ciudad sorpresa desde 150€, con vuelos de ida y vuelta y alojamiento incluidos.Descarta las ciudades que no quieres visitar (una gratuïta y, las siguientes, por 5€ cada una) y haz tu reserva. Dos días antes de salir, te mandaremos los billetes y descubrirás cuál es tu ciudad. ¡Atrévete a vivir tu próxima aventura este fin de semana!</p>
</div>
</div>
</div>
</div>
Change $($this) to $(this):
open = $(this).nextAll("first:faq_reply_container");
You mentioned:
"What I want to do is when the plus icon is clicked all opened reply boxes have to slide up and the one I clicked has to slide up"
Write the following line inside event listener:
$(this).closest('.faq_question_reply_container')
.find('.faq_reply_container')
.slideDown();
$(document).ready(function(){
$(".faq_reply_container").slideUp();
$(".faq_show_icon").click(function(){
$(".faq_reply_container").slideUp();
$(this).closest('.faq_question_reply_container')
.find('.faq_reply_container')
.slideDown();
});
});
.faq_container{width:100%; height:auto; display:flex; flex-direction:column;}
.faq_question_reply_container{width:100%; height:auto; outline:2px solid #00BDE7; margin:5px 0px 5px 0px; }
.faq_question_container{outline:2px solid #00BDE7; background-color:white; width:100%; height:45px; display:flex; align-items:center; padding-left:15px; justify-content:space-between;}
.faq_question{font-family:Rubik; font-weight:600; color:rgba(0, 0, 0, 1.0); font-size:18px;}
.faq_show_icon{width:39px; height:39px; outline:1px solid rgba(0, 0, 0, 0.2); margin-right:3px; display:flex; justify-content:center; align-items:center; font-weight:900; color:rgba(0, 0, 0, 1.0); font-size:50px;}
.faq_show_icon:hover{cursor:pointer; background-color:#F5F5F5;}
.faq_reply_container{width:100%; height:auto; padding:15px 45px 15px 15px; background-color:#F5F5F5;}
.faq_reply{font-family:Patua One; color:rgba(0, 0, 0, 0.8); font-size:15px; line-height:23px;}
.article_container{width:77%; height:100%; padding:15px 15px 15px 15px; overflow:hidden;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="article_container" style="">
<div class="faq_container" style="">
<div class="faq_question_reply_container" style="">
<div class="faq_question_container" style="">
<span class="faq_question" style="">¿Esto es una prefunta seria asi que espero una respuesta seria?</span>
<div class="faq_show_icon" style="">+</div>
</div>
<div class="faq_reply_container" style="">
<p class="faq_reply" style="">Waynabox es una nueva forma de viajar por Europa. Te escaparás durante tres días a una ciudad sorpresa desde 150€, con vuelos de ida y vuelta y alojamiento incluidos.Descarta las ciudades que no quieres visitar (una gratuïta y, las siguientes, por 5€ cada una) y haz tu reserva. Dos días antes de salir, te mandaremos los billetes y descubrirás cuál es tu ciudad. ¡Atrévete a vivir tu próxima aventura este fin de semana!</p>
</div>
</div>
<div class="faq_question_reply_container" style="">
<div class="faq_question_container" style="">
<span class="faq_question" style="">¿Esto es una prefunta seria asi que espero una respuesta seria?</span>
<div class="faq_show_icon" style="">+</div>
</div>
<div class="faq_reply_container" style="">
<p class="faq_reply" style="">Waynabox es una nueva forma de viajar por Europa. Te escaparás durante tres días a una ciudad sorpresa desde 150€, con vuelos de ida y vuelta y alojamiento incluidos.Descarta las ciudades que no quieres visitar (una gratuïta y, las siguientes, por 5€ cada una) y haz tu reserva. Dos días antes de salir, te mandaremos los billetes y descubrirás cuál es tu ciudad. ¡Atrévete a vivir tu próxima aventura este fin de semana!</p>
</div>
</div>
<div class="faq_question_reply_container" style="">
<div class="faq_question_container" style="">
<span class="faq_question" style="">¿Esto es una prefunta seria asi que espero una respuesta seria?</span>
<div class="faq_show_icon" style="">+</div>
</div>
<div class="faq_reply_container" style="">
<p class="faq_reply" style="">Waynabox es una nueva forma de viajar por Europa. Te escaparás durante tres días a una ciudad sorpresa desde 150€, con vuelos de ida y vuelta y alojamiento incluidos.Descarta las ciudades que no quieres visitar (una gratuïta y, las siguientes, por 5€ cada una) y haz tu reserva. Dos días antes de salir, te mandaremos los billetes y descubrirás cuál es tu ciudad. ¡Atrévete a vivir tu próxima aventura este fin de semana!</p>
</div>
</div>
</div>
</div>
That block of my html fade in when the trigger element is activated, but is also fade out when user scroll back past the trigger. I dont want to fade out. I want to fade in and leave it there till user hits f5 or reload the page.
$(document).ready(function(){
// Init ScrollMagic
var controller = new ScrollMagic.Controller();
// build a scene
var ourScene = new ScrollMagic.Scene({
triggerElement: '#project01'
})
.setClassToggle('#project01', 'fade-in') // add class to project01
.addIndicators({
name: 'fade scene',
colorTrigger: 'black',
indent: 200,
colorStart: '#75C695'
}) // this requires a plugin
.addTo(controller);});
.project {
text-align: center;
opacity: 0;
transition: all 1s ease-out;}
.project.fade-in {
opacity: 1;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>
<div class="container porque" id="porque">
<div class="row">
<div id="project01" class="project">
<div class="col-xs-12 text-center">
<h1>¿Por qué solicitar un servicio Clens?</h1>
</div>
<div class="col-xs-12 porquearriba">
<div class="col-xs-12 col-sm-4 text-center">
<i class="fa fa-money fa-4x" aria-hidden="true"></i>
<h3>Precio óptimo</h3>
<p>Estamos muy seguros de que nuestros precios por el servicio de limpieza y calidad serán aceptados por usted.</p>
</div>
<div class="col-xs-12 col-sm-4 text-center">
<i class="fa fa-comments fa-4x" aria-hidden="true"></i>
<h3>Feedback activo</h3>
<p>Lo más importante para nosotros es la confianza de nuestros clientes.</p>
</div>
<div class="col-xs-12 col-sm-4 text-center">
<i class="fa fa-handshake-o fa-4x" aria-hidden="true"></i>
<h3>Personal amigable</h3>
<p>Trabajamos sólo con profesionales. Los proveedores de servicio siempre serán competentes, ordenados y corteses.</p>
</div>
</div>
<div class="col-xs-12 porqueabajo">
<div class="col-xs-12 col-sm-4 text-center">
<i class="fa fa-clock-o fa-4x" aria-hidden="true"></i>
<h3>Conveniencia</h3>
<p>Procederemos a limpiar tu hogar en la fecha y hora solicitada con máxima eficiencia</p>
</div>
<div class="col-xs-12 col-sm-4 text-center">
<i class="fa fa-star-o fa-4x" aria-hidden="true"></i>
<h3>Limpieza y orden</h3>
<p>Los proveedores de servicio siempre harán el mejor esfuerzo para satisfacer tus altos requerimientos y deseos en el mejor tiempo posible</p>
</div>
<div class="col-xs-12 col-sm-4 text-center">
<i class="fa fa-thumbs-o-up fa-4x" aria-hidden="true"></i>
<h3>Satisfacción</h3>
<p>El 90% de nuestros clientes valora nuestros servicios con 5 estrellas</p>
</div>
</div>
</div>
</div>
</div>
Your question is a bit hard to understand, but maybe this is what you are looking for:
You didn't use a triggerHook in your scene. By default the triggerHook is in the vertical middle - inmy snippet I set it to be at the top (value between 0 and 1, ranges from top to bottom of the window).
$(document).ready(function() {
// Init ScrollMagic
var controller = new ScrollMagic.Controller();
// build a scene
var ourScene = new ScrollMagic.Scene({
triggerElement: '#project01',
triggerHook: 0
})
.setClassToggle('#project01', 'fade-in') // add class to project01
.addIndicators({
name: 'fade scene',
colorTrigger: 'black',
indent: 200,
colorStart: '#75C695'
}) // this requires a plugin
.addTo(controller);
});
.project {
text-align: center;
opacity: 0;
transition: all 1s ease-out;
}
.project.fade-in {
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>
<div class="container porque" id="porque">
<div class="row">
<div id="project01" class="project">
<div class="col-xs-12 text-center">
<h1>¿Por qué solicitar un servicio Clens?</h1>
</div>
<div class="col-xs-12 porquearriba">
<div class="col-xs-12 col-sm-4 text-center">
<i class="fa fa-money fa-4x" aria-hidden="true"></i>
<h3>Precio óptimo</h3>
<p>Estamos muy seguros de que nuestros precios por el servicio de limpieza y calidad serán aceptados por usted.</p>
</div>
<div class="col-xs-12 col-sm-4 text-center">
<i class="fa fa-comments fa-4x" aria-hidden="true"></i>
<h3>Feedback activo</h3>
<p>Lo más importante para nosotros es la confianza de nuestros clientes.</p>
</div>
<div class="col-xs-12 col-sm-4 text-center">
<i class="fa fa-handshake-o fa-4x" aria-hidden="true"></i>
<h3>Personal amigable</h3>
<p>Trabajamos sólo con profesionales. Los proveedores de servicio siempre serán competentes, ordenados y corteses.</p>
</div>
</div>
<div class="col-xs-12 porqueabajo">
<div class="col-xs-12 col-sm-4 text-center">
<i class="fa fa-clock-o fa-4x" aria-hidden="true"></i>
<h3>Conveniencia</h3>
<p>Procederemos a limpiar tu hogar en la fecha y hora solicitada con máxima eficiencia</p>
</div>
<div class="col-xs-12 col-sm-4 text-center">
<i class="fa fa-star-o fa-4x" aria-hidden="true"></i>
<h3>Limpieza y orden</h3>
<p>Los proveedores de servicio siempre harán el mejor esfuerzo para satisfacer tus altos requerimientos y deseos en el mejor tiempo posible</p>
</div>
<div class="col-xs-12 col-sm-4 text-center">
<i class="fa fa-thumbs-o-up fa-4x" aria-hidden="true"></i>
<h3>Satisfacción</h3>
<p>El 90% de nuestros clientes valora nuestros servicios con 5 estrellas</p>
</div>
</div>
</div>
</div>
</div>
Hey I'm trying to fix a tab inspired page for mobile. When the user clicks on a round circle it should ge to the text. Than when you click "Terug naar keuzemenu" you should go back to the circles (the navigation of the tabs). However when I want to go to other tabs the first time I click he doesnt scroll to the text section but the second time he does. So i have to click twice but cant figure out why.
FIDDLE
https://jsfiddle.net/Ljv5a2ez/2/
HTML
<div class="span12" id="xx-content">
<div class="clearfix row-fluid">
<div class="xx_content_inner">
<div class="xx_row-12" id="aj_logobox">
<div class="span3">
<div class="xx_active check-up-overview" id="lente">
<div class="xx_logo_container">
<div class="xx_logo_inner">
<a href="#hometext">
<img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/home_delivery.jpg" />
</a>
</div>
</div>
</div>
</div>
<div class="span3">
<div class="check-up-overview" id="full">
<div class="xx_logo_container">
<div class="xx_logo_inner">
<a href="#collecttext">
<img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/click_and_collect.jpg" />
</a>
</div>
</div>
</div>
</div>
<div class="span3">
<div class="check-up-overview" id="pro">
<div class="xx_logo_container">
<div class="xx_logo_inner">
<a href="#moretext">
<img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/look_for_more.jpg" />
</a>
</div>
</div>
</div>
</div>
<div class="span3">
<div class="check-up-overview" id="ebike">
<div class="xx_logo_container">
<div class="xx_logo_inner">
<a href="#smarttext">
<img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/smartpay_cirkel.jpg" />
</a>
</div>
</div>
</div>
</div>
</div>
<div class="xx_row-2 lente bike-show" id="hometext">
<p><span class="xx_title" id="title"><h2 class="aj_h2fix">Gratis thuis leveren vanuit je A.S.Adventure Store</h2></span></p>
<p class="xx_excl">Sta je in de winkel en is het product van je dromen niet meer beschikbaar in een andere maat of kleur?<br> Geen nood: indien voorradig in een andere A.S.Adventure Store, <strong>bestellen</strong> we het gewenste product in de Store en <strong>leveren</strong> we het <strong>gratis</strong><br> op een <strong>adres naar keuze</strong>. Van service gesproken.</p>
</div>
<div class="xx_row-2 full bike-hide" id="collecttext">
<p><span class="xx_title" id="title"><h2 class="aj_h2fix">Maak je keuze online en haal je bestelling op in de winkel</h2></span></p>
<p class="xx_excl">Vanuit je luie zetel shoppen? Winkelen bij A.S.Adventure kun je altijd en overal. Wil je helemaal zeker zijn van de maat of kleur?<br> <strong>Reserveer online zonder aankoopverplichting</strong> via de Click & Collect service en haal je bestelling later op in jouw<br> <strong>favoriete A.S.Adventure Store</strong>. Je kiest zelf wat je wel of niet koopt.</p>
</div>
<div class="xx_row-2 pro bike-hide" id="moretext">
<p><span class="xx_title" id="title"><h2 class="aj_h2fix">Ontdek een nog uitgebreider aanbod in onze webshop</h2></span></p>
<p class="xx_excl">Dacht je dat je alles al gezien had in onze Stores? Think again! In <strong>onze webshop vind</strong> je van de onderstaande merken een <strong>nog uitgebreider aanbod</strong>. <br>Gebruik de schermen in de Stores om naar de webshop te surfen of grasduin online door ons aanbod.<br> Keuze gemaakt? Laat je producten dan <strong>gratis afleveren</strong> via Home Delivery.</p>
</div>
<div class="xx_row-2 ebike bike-hide" id="smarttext">
<p><span class="xx_title" id="title"><h2 class="aj_h2fix">Betaal je aankopen in de winkel met je smartphone</h2></span></p>
<p class="xx_excl">Merk je tijdens het winkelen dat je je portefeuille bent vergeten? Geen nood, vanaf nu kun je <strong>in alle A.S.Adventure Stores ook betalen met SmartPay</strong>. <br>Even je <strong>smartphone</strong> opdiepen, de <strong>Bancontact-app</strong> openen en de <strong>unieke QR-code</strong> aan de kassa inscannen. <br>Je hoeft dan alleen nog even de betaling te bevestigen met je pincode. Makkelijk, veilig en efficiënt!</p>
</div>
</div>
</div>
<div class="clearfix row-fluid lente bike-show">
<div class="xx_row-3">
<div class="span12">
<div class="xx_span_inner xx_top">
<h3>Hoe werkt het?</h3>
<ul style="list-style:none;">
<li><span>1.</span> We bestellen samen in de Store met jou het gewenste artikel via onze website.</li>
<li><span>2.</span> Je betaalt aan de kassa.</li>
<li class="xx_last-item"><span>3.</span> Je bestelling wordt enkele dagen later geleverd op een adres naar keuze of bij een afhaalpunt.</li>
</ul>
</div>
</div>
</div>
Terug naar keuzemenu
</div>
<div class="clearfix row-fluid full bike-hide">
<div class="xx_row-3">
<div class="span12">
<div class="xx_span_inner xx_top">
<h3>Hoe werkt het?</h3>
<ul style="list-style:none;">
<li><span>1.</span> Reserveer en betaal je product(en) online.</li>
<li><span>2.</span> Kies de winkel waar je je product(en) wenst af te halen.</li>
<li><span>3.</span> Je ontvangt via mail een bevestiging van je bestelling.</li>
<li><span>4.</span> Via mail of sms verneem je wanneer je product(en) klaarliggen.</li>
<li class="xx_last-item"><span>5.</span> Mocht je in de winkel alsnog beslissen je aankoop te annuleren, krijg je onmiddellijk je geld terug.</li>
</ul>
</div>
</div>
</div>
Terug naar keuzemenu
</div>
<div class="clearfix row-fluid pro bike-hide">
<div class="xx_row-3">
<div class="span12">
<div class="xx_span_inner xx_top">
<h3>Uitgebreid aanbod:</h3>
<div id="xx_aanbod_logos">
<a alt="Fjallraven" href="http://www.asadventure.com/benl/fjallraven" target="_parent"><img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/logo_fjallraven.png" /> </a>
<a alt="The North Face" href="http://www.asadventure.com/benl/the-north-face" target="_parent"> <img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/logo_the-north-face.png" /> </a>
<a alt="Vaude" href="http://www.asadventure.com/benl/vaude" target="_parent"> <img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/logo_vaude.png" /> </a>
<a alt="Garmin" href="http://www.asadventure.com/benl/garmin" target="_parent"> <img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/logo_garmin.png" /> </a>
<a alt="Thule" href="http://www.asadventure.com/benl/thule" target="_parent"> <img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/logo_thule.png" /> </a>
<a alt="Eastpak" href="http://www.asadventure.com/benl/eastpak" target="_parent"> <img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/logo_eastpak.png" /> </a>
<a alt="Millet" href="http://www.asadventure.com/benl/millet" target="_parent"> <img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/logo_millet.png" /> </a>
<a alt="Gore Bike wear" href="http://www.asadventure.com/benl/gore-bike-wear" target="_parent"> <img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/logo_gore_bike.png" /> </a>
<a alt="Gore Running wear" href="http://www.asadventure.com/benl/gore-running-wear" target="_parent"> <img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/logo_gore_running.png" /> </a>
<a alt="Mi-Pac" href="http://www.asadventure.com/benl/mi-pac" target="_parent"> <img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/logo_mi-pac.png" /> </a>
<br>
<a alt="Suunto" href="http://www.asadventure.com/benl/suunto" target="_parent"> <img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/logo_suunto.png" /> </a>
<a alt="Polar" href="http://www.asadventure.com/benl/polar" target="_parent"> <img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/logo_polar.png" /> </a>
<a alt="Camel Active" href="http://www.asadventure.com/benl/camel-active" target="_parent"> <img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/logo_camel_active.png" /> </a>
<a alt="Dakine" href="http://www.asadventure.com/benl/dakine" target="_parent"> <img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/logo_dakine.png" /> </a>
<a alt="Lowa" href="http://www.asadventure.com/benl/lowa" target="_parent"> <img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/logo_lowa.png" /> </a>
<a alt="CKS" href="http://www.asadventure.com/benl/cks-dames" target="_parent"> <img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/logo_cks_black.png" /> </a>
<a alt="Komono" href="http://www.asadventure.com/benl/komono" target="_parent"> <img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/logo_komono.png" /> </a>
<a alt="Jack Wolfskin" href="http://www.asadventure.com/benl/jack-wolfskin" target="_parent"> <img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/logo_wolfskin.png" /> </a>
<a alt="BakerBridge" href="http://www.asadventure.com/benl/baker-bridge" target="_parent"> <img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/logo_baker-bridge.png" /> </a>
<a alt="BakerBridge Dames" href="http://www.asadventure.com/benl/baker-bridge-dames" target="_parent"> <img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/logo_baker-bridge-dames.png" /> </a>
<a alt="Bergans" href="http://www.asadventure.com/benl/bergans" target="_parent"> <img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/logo_bergans.png" /> </a>
<a alt="Van Hassels" href="http://www.asadventure.com/benl/van-hassels" target="_parent"> <img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/logo_van-hassels.png" /> </a>
</div>
</div>
</div>
</div>
Terug naar keuzemenu
</div>
<div class="clearfix row-fluid ebike bike-hide">
<div class="xx_row-3">
<div class="span12">
<div class="xx_span_inner xx_top">
<h3>Hoe werkt het?</h3>
<ul style="list-style:none;">
<li><span>1.</span> Installeer de Bancontact-app op je smartphone:</li>
<li><span></span><a target="_blank" href="https://play.google.com/store/apps/details?id=mobi.inthepocket.bcmc.bancontact&hl=en">Google Play >></a></li>
<li><span></span><a target="_blank" href="https://itunes.apple.com/be/app/bancontact-mobile/id858371800?l=en&mt=8">Apple App Store >></a></li>
<li><span></span><a target="_blank" href="https://www.microsoft.com/en-gb/store/apps/bancontact/9nblggh3fvl1">Microsoft Store >></a></li>
<li><span>2.</span> Open de Bancontact-app en volg de instructies om de app te activeren en je bankkaart(en) toe te voegen.</li>
<li><span>3.</span> Aan de kassa scan je de unieke QR-code die op de betaalterminal verschijnt om je betaling te bevestigen.<br> Dat kan gewoon vanuit de Bancontact-app.</li>
<li><span>4.</span> Je smartphone toont de naam van de winkel en het te betalen bedrag op het scherm.</li>
<li class="xx_last-item"><span>5.</span> Druk op OK, geef je pincode op in de app en je krijgt een bevestigingsbericht te zien op je telefoon. Transactie geslaagd!</li>
</ul>
</div>
</div>
</div>
Terug naar keuzemenu
</div>
</div>
JS TABS
$(document).ready(function () {
$('.check-up-overview').click(function () {
if (!$(this).hasClass('xx_active')) {
var sCurrent = $(this).attr('id');
var sPrevious = $('.xx_active').attr('id');
$('.xx_active').removeClass('xx_active');
$('.' + sPrevious).removeClass('bike-show').addClass('bike-hide');
$(this).addClass('xx_active');
$('.' + sCurrent).removeClass('bike-hide').addClass('bike-show');
}
});
});
JS SMOOTH
$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top //no need of parseInt here
}, 900, 'swing', function () {
window.location.hash = target;
});
});
});
It was because of your click handler on the parent class .check-up-overview.
It cause double trigger when you click on the circle which explains why you have to click twice to bind the scrollTop() function.
Here the JS code changed :
$(document).ready(function() {
$('a[href^="#"]').on('click', function(e) {
if (!$(this).parents('.check-up-overview').hasClass('xx_active')) {
var sCurrent = $(this).parents('.check-up-overview').attr('id');
var sPrevious = $('.xx_active').attr('id');
$('.xx_active').removeClass('xx_active');
$('.' + sPrevious).removeClass('bike-show').addClass('bike-hide');
$(this).parents('.check-up-overview').addClass('xx_active');
$('.' + sCurrent).removeClass('bike-hide').addClass('bike-show');
}
if($(window).width() < 768){
e.preventDefault();
var target = this.hash;
$target = $(target);
$('html, body').animate({
'scrollTop': $target.offset().top //no need of parseInt here
}, 900, 'swing', function() {
//window.location.hash = target;
});
}else{
e.preventDefault();
}
});
});
And here is the working fiddle