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>
Related
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>
On a specific webpage, https://www.aeternus.org/try/, in order to publish some quotes in the Dutch (NL) language, I have installed a vertical scroll marquee script. In the first tab, this script is working fine and does its job very well.
Major issue: When I try to install the same script (but with different quotes in other languages (EN, DE, FR) for the 2nd, 3rd and 4th tab as well. they don't work and the script in the first tab, stops working as well.
I assume that with each tab-switch:
-- I have to "stop" the already active script in the "old" tab,
-- and to "start" the script in the "new" tab.
The code I am using sofar, is the following:
<style>
#charset "UTF-8";
.tab-menu {
list-style-type: none;
overflow: hidden;
margin: 2.5em 0 0 0;
padding: 0;
}
.tab-menu li {
display: inline;
float: left;
}
.tab-menu li a {
display: block;
padding: 10px 18px;
border-top: 1px solid #198219;
border-left: 1px solid #198219;
border-right: 1px solid #198219;
color: #ffffff;
background-color: #198219;
text-decoration: none;
}
.tab-menu li a:hover {
background-color: #208c20;
}
.tab-menu li.active a {
color: #222222;
background-color: #f5f5f5;
border-top: 1px solid #ccf;
border-left: 1px solid #ccf;
border-right: 1px solid #ccf;
}
.tab-menu li.active a:hover {
color: #222222;
background-color: #f5f5f5;
text-decoration: none;
cursor: default;
}
.tab-content {
position: relative;
width: 100%;
min-height: 180px;
max-height: 380px;
overflow: auto;
margin-bottom: 2.5em;
padding: 20px;
border-left: 1px solid #ccf;
border-bottom: 1px solid #ccf;
background-color: #f5f5f5;
}
.tab-loading {
position: absolute;
top: 50%;
left: 50%;
margin-top: -16px;
margin-left: -16px;
width: 32px;
height: 32px;
background-image: url(./ajax-loader.gif);
}
.fa-circle {
color: #4F81BD;
position: relative;
top: -0.20em;
}
#wrap{
margin: 0px auto;
}
.right {
float: right;
}
</style>
<script src="https://www.aeternus.org/linski_tabs/jquery.fwd_tabs.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://www.aeternus.org/linski_tabs/jquery.liMarquee.js"></script>
<link rel="stylesheet" href="https://www.aeternus.org/linski_tabs/liMarquee.css">
<!-- Initialization of plugin -->
<script>
$(window).on('load',function(){
$('.str4').liMarquee({
direction: 'top',
height:300,
width: '100%',
hoverStop: false,
scrollDelay: 230
});
})
$(function() { $(".tabs").fwd_tabs(); })
</script>
<div class="tabs">
<ul class="tab-menu">
<li>Quotes - NL</li>
<li>Quotes - EN</li>
<li>Quotes - DE</li>
<li>Quotes - FR</li>
</ul>
<div class="tab-content" id="tab-1">
<div class="str4 mWrap">
<!-- Start Your Code -->
<div class="contItem" id="wrap";>
<div style="float:left"> <i class="fa fa-circle" style="font-size:0.6em"></i>
Wees niet bang voor schaduwen, het betekent dat er ergens dichtbij licht is.</div>
<div class="right">Ruth Renkle</div><br><br>
<div style="float:left"> <i class="fa fa-circle" style="font-size:0.6em"></i>
Waarom moeilijk doen als het samen kan?</div>
<div class="right">Loesje</div><br><br>
<div style="float:left"> <i class="fa fa-circle" style="font-size:0.6em"></i>
Hij die anderen kent is geleerd. Hij die zichzelf kent, is wijs.</div>
<div class="right">Lao Tse</div><br><br>
<div style="float:left"> <i class="fa fa-circle" style="font-size:0.6em"></i>
Probeer eerst te begrijpen, dan pas begrepen te worden.</div>
<div class="right">Stephen Covey</div><br><br>
<div style="float:left"> <i class="fa fa-circle" style="font-size:0.6em"></i>
Zorg ervoor dat de stem van je hart luider is dan die van je ego.</div>
<div class="right">Chinees gezegde</div><br><br>
<div style="float:left"> <i class="fa fa-circle" style="font-size:0.6em"></i>
Er ontstaat geen harmonie als iedereen dezelfde noot zingt.</div>
<div class="right">Doug Floyd</div><br><br>
<div style="float:left"> <i class="fa fa-circle" style="font-size:0.6em"></i>
Hoewel iedereen uniek is, durft slechts een enkeling anders te zijn.</div>
<div class="right">Wouter Kloosterman</div><br><br>
<div style="float:left"> <i class="fa fa-circle" style="font-size:0.6em"></i>
Let's make the impossible possible as possible as soon as possible.</div>
<div class="right">Pierre Linssen</div><br><br>
<div style="float:left"> <i class="fa fa-circle" style="font-size:0.6em"></i>
Bij een overwinning op jezelf is er geen verliezer.</div>
<div class="right">Olaf Hoenson</div><br><br>
<div style="float:left"> <i class="fa fa-circle" style="font-size:0.6em"></i>
Vriendschap is liefde op het eerste woord.</div>
<div class="right">Harry Mulisch</div><br><br>
<div style="float:left"> <i class="fa fa-circle" style="font-size:0.6em"></i>
Mensen met vaststaande antwoorden zijn bang voor de vraag.</div>
<div class="right">Kees Tillema</div><br><br>
<div style="float:left"> <i class="fa fa-circle" style="font-size:0.6em"></i>
De dichter is een beeldhouwer die muziek schildert.</div>
<div class="right">Clem Schouwenaars</div><br><br>
<div style="float:left"> <i class="fa fa-circle" style="font-size:0.6em"></i>
Wie de toekomst als tegenwind ervaart, loopt in de verkeerde richting.</div>
<div class="right">Robbert Nijenhuis</div><br><br>
<div style="float:left"> <i class="fa fa-circle" style="font-size:0.6em"></i>
Misschien is ‘misschien’ het juiste woord voor zeker.</div>
<div class="right">Marc van Halsendaele</div><br><br>
<div style="float:left"> <i class="fa fa-circle" style="font-size:0.6em"></i>
Groot worden doe je door klein te blijven.</div>
<div class="right">Eckart Wintzen</div><br><br>
<div style="float:left"> <i class="fa fa-circle" style="font-size:0.6em"></i>
Het schijnt dat mensen die fouten durven maken ook veel creatiever zijn.</div>
<div class="right">Loesje</div><br><br>
<div style="float:left"> <i class="fa fa-circle" style="font-size:0.6em"></i>
De manier waarop we aandacht geven, maakt het verschil tussen au en wow.</div>
<div class="right"> Isaac Shapiro</div><br><br>
</div>
<!-- End Your Code -->
</div>
</div>
<div class="tab-content" id="tab-2">
<p>Also, the number of daily new infections appears to have stabilised. Although the health ministry has warned that weekend figures can be misleading because of a delay by local authorities in reporting data, the apparently improving picture will further encourage calls for the lifting of certain restrictions. There has been growing social and political pressure on Prime Minister Sánchez to allow children, in particular, to go outside. Opposition leader Pablo Casado tweeted that "these little heroes are climbing the walls" after more than a month of not being allowed out beyond the confines of their homes.</p>
</div>
<div class="tab-content" id="tab-3">
<p>Schnee besteht aus vielen kleinen Schneekristallen, die in einem Kristallgitter fest miteinander verbunden sind. Schneeflocken sind keine gefrorenen Wassertropfen, sondern bilden sich in einer Kette von physikalischen Prozessen. Die meist sechseckige Form der Schneekristalle erklärt sich aus der Kristall-gitter-Struktur der Wassermoleküle. Diese bilden, wenn es kalt genug ist, die typische Sternstruktur aus. Die genaue Form der Schneeflocken ist vor allem abhängig von der Temperatur und der Luftfeuchtigkeit bei der Entstehung.</p>
</div>
<div class="tab-content" id="tab-4">
<p>Il a toujours la même allure d’adolescent dégingandé aux pulls couleur pastel démodés et aux yeux qui sourient en permanence derrière des lunettes rondes. Mais avec sa fortune de 100 milliards de dollars, sa place de deuxième homme le plus riche du monde, son passé de PDG d’un des joyaux de l’industrie américaine du software, ses réseaux planétaires et la force de frappe de sa Fondation philanthropique dotée d’un fonds de 40 milliards, Bill Gates représente à lui tout seul une entreprise de «soft power» mondiale.</p>
</div>
</div>
I have prepared a codepen at: https://codepen.io/piotr-linski/pen/BaozEVZ
Minor issue: For unclear reason to me, in the codepen the tab-content of the other tabs is visible as well.
Any suggestions, especially how to solve the major issue are highly appreciated.
I managed to create an alternative solution to show different vertical marquees in several tabs. This alternative solution is based on:
- the following jquery tabs-script, check this link ...
- the following vertical marquee script, check this link ...
<style>
#marqueecontainer {
position: relative;
width: 100%; /*marquee width */
height: 300px; /*marquee height */
background-color: #F5F5F5;
overflow: hidden;
// border: 2px solid purple;
// padding: 2px;
margin-left: 3px;
padding-left: 0px;
// margin-top: -5px;
}
#vmarquee {
position: absolute;
width: 100%;
}
</style>
<link href="https://www.aeternus.org/linski_tabs/vermar.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://www.aeternus.org/linski_tabs/jquery.fwd_tabs.js"></script>
<script type="text/javascript">
/***********************************************
* Cross browser Marquee II- � Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
var delayb4scroll=1500 //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)
var marqueespeed=1.0 //Specify marquee scroll speed (larger is faster 1-10)
var pauseit=1 //Pause marquee onMousever (0=no. 1=yes)?
////NO NEED TO EDIT BELOW THIS LINE////////////
var copyspeed=marqueespeed
var pausespeed=(pauseit==0)? copyspeed: 0
var actualheight=''
function scrollmarquee(){
if (parseInt(cross_marquee.style.top)>(actualheight*(-1)+8)) //if scroller hasn't reached the end of its height
cross_marquee.style.top=parseInt(cross_marquee.style.top)-copyspeed+"px" //move scroller upwards
else //else, reset to original position
cross_marquee.style.top=parseInt(marqueeheight)+8+"px"
}
function initializemarquee(){
cross_marquee=document.getElementById("vmarquee")
cross_marquee.style.top=0
marqueeheight=document.getElementById("marqueecontainer").offsetHeight
actualheight=cross_marquee.offsetHeight //height of marquee content (much of which is hidden from view)
if (window.opera || navigator.userAgent.indexOf("Netscape/7")!=-1){ //if Opera or Netscape 7x, add scrollbars to scroll and exit
cross_marquee.style.height=marqueeheight+"px"
cross_marquee.style.overflow="scroll"
return
}
setTimeout('lefttime=setInterval("scrollmarquee()",30)', delayb4scroll)
}
if (window.addEventListener)
window.addEventListener("load", initializemarquee, false)
else if (window.attachEvent)
window.attachEvent("onload", initializemarquee)
else if (document.getElementById)
window.onload=initializemarquee
</script>
<script>
$(function() { $(".tabs").fwd_tabs(); });
</script>
<div class="tabs">
<ul class="tab-menu">
<li>Quotes - NL</li>
<li>Quotes - EN</li>
<li>Quotes - DE</li>
<li>Quotes - FR</li>
</ul>
<div id="marqueecontainer" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">
<div id="vmarquee">
<div class="tab-content" id="tab-NL">
<br><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Wees niet bang voor schaduwen, het betekent dat er ergens dichtbij licht is.</div>
<div class="right">Ruth Renkle</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Waarom moeilijk doen als het samen kan?</div>
<div class="right">Loesje</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Hij die anderen kent is geleerd. Hij die zichzelf kent, is wijs.</div>
<div class="right">Lao Tse</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Probeer eerst te begrijpen, dan pas begrepen te worden.</div>
<div class="right">Stephen Covey</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Zorg ervoor dat de stem van je hart luider is dan die van je ego.</div>
<div class="right">Chinees gezegde</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Er ontstaat geen harmonie als iedereen dezelfde noot zingt.</div>
<div class="right">Doug Floyd</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Hoewel iedereen uniek is, durft slechts een enkeling anders te zijn.</div>
<div class="right">Wouter Kloosterman</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
De mens die zich niet ontwikkelt, loopt de kans ingewikkeld te blijven.</div>
<div class="right">Eric de Waard</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Bij een overwinning op jezelf is er geen verliezer.</div>
<div class="right">Olaf Hoenson</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Vriendschap is liefde op het eerste woord.</div>
<div class="right">Harry Mulisch</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Mensen met vaststaande antwoorden zijn bang voor de vraag.</div>
<div class="right">Kees Tillema</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
De dichter is een beeldhouwer die muziek schildert.</div>
<div class="right">Clem Schouwenaars</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Wie de toekomst als tegenwind ervaart, loopt in de verkeerde richting.</div>
<div class="right">Robbert Nijenhuis</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Misschien is ‘misschien’ het juiste woord voor zeker.</div>
<div class="right">Marc van Halsendaele</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Groot worden doe je door klein te blijven.</div>
<div class="right">Eckart Wintzen</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Het schijnt dat mensen die fouten durven maken ook veel creatiever zijn.</div>
<div class="right">Loesje</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Onze manier van aandacht geven, maakt het verschil tussen au en wow.</div>
<div class="right"> Isaac Shapiro</div><br><br>
</div>
<div class="tab-content" id="tab-EN">
<br><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Change is painful in the beginning, but worth it in the end.</div>
<div class="right">Jaykaran Sagar</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Raise your words, not your voice. It is rain that grows flowers, not thunder.</div>
<div class="right">Rumi</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
We are not retreating, we are just advancing in another direction.</div>
<div class="right">General D. McArthur</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Be the change you wish to see in the world.</div>
<div class="right">Mahatma Gandhi</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Each of us can make a difference. Together we make change.</div>
<div class="right">Barbara Mikulski</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Small opportunities are often the beginning of great enterprises.</div>
<div class="right">Demosthenes</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Minds are like parachutes, they work best when open.</div>
<div class="right">Thomas Dewar</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Let's make the impossible possible as possible as soon as possible.</div>
<div class="right">Pierre Linssen</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
A good plan today is better than a perfect plan tomorrow.</div>
<div class="right">George Patton</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
All things are difficult before they are easy.</div>
<div class="right">Thomas Fuller</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Honesty is being able to tell the truth without hurting anyone.</div>
<div class="right">Federico Fellini</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
It is harder to crack a prejudice than an atom.</div>
<div class="right">Albert Einstein</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Either you run the day, or the day runs you.</div>
<div class="right">Jim Rohn</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Ideologies separate us. Dreams and anguish bring us together.</div>
<div class="right">Eugene Ionesco</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Most smiles are started by another smile.</div>
<div class="right">Frank A. Clark</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
The only way to have a friend ist to be one.</div>
<div class="right">Ralph Waldo Emerson</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
The greatest amount of wasted time is the time not getting started.</div>
<div class="right"> Dawson Trotman</div><br><br>
</div>
<div class="tab-content" id="tab-DE">
<br><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Fang an! Dadurch alleine kann das Unmögliche möglich werden.</div>
<div class="right">Thomas Carlyle</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Das Neue ist immer risikoreich. Denn für das Neue gibt es keine Erfahrungen.</div>
<div class="right">N. Blüm</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Wer glaubt etwas zu sein, hat aufgehört etwas zu werden.</div>
<div class="right">Philip Rosenthal</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Ich kann, weil ich will, was ich muss.</div>
<div class="right">Immanuel Kant</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Die Kinder sind die wirklichen Lehrmeister der Menschheit.</div>
<div class="right">Peter Rosegger</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Wer seine Schwächen nicht kennt, hat eine Stärke zu wenig.</div>
<div class="right">Lothar Habler</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Das Wichtigste in einem Gespräch ist zu hören, was nicht gesagt wurde.</div>
<div class="right">Peter F. Drucker</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Das Unmögliche ist das, was man nie versucht hat.</div>
<div class="right">Hans Günther Adler</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Lass deine Taten sein wie deine Worte. Und deine Worte wie dein Herz.</div>
<div class="right">Ludwig Uhland</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Wer etwas will, findet Wege. Wer etwas nicht will, findet Gründe.</div>
<div class="right">Dalai Lama</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Es gibt keine fünf oder sechs Weltwunder, sondern nur eines: die Liebe.</div>
<div class="right">Jacques Prévert</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Nicht: Es muß etwas geschehen, sondern: Ich muß etwas tun.</div>
<div class="right">Hans Scholl</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Interessante Selbstgespräche setzen einen klugen Partner voraus.</div>
<div class="right">Herbert George Wells</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Die Praxis sollte das Ergebnis des Nachdenkens sein, nicht umgekehrt.</div>
<div class="right">Hermann Hesse</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Die Gedankenfreiheit haben wir. Jetzt brauchen wir nur noch die Gedanken.</div>
<div class="right">Karl Kraus</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Optimisten leiden ohne zu klagen. Pessimisten klagen ohne zu leiden.</div>
<div class="right">Karl Farkas</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Wer wirklich Neues erdenken will, kann gar nicht genug, “verrückt” sein.</div>
<div class="right"> Niels Bohr</div><br><br>
</div>
<div class="tab-content" id="tab-FR">
<br><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Rien n’est permanent, sauf le changement.</div>
<div class="right">Héraclite d’Ephèse</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Aimer, c’est savoir dire je t’aime sans parler.</div>
<div class="right">Victor Hugo</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
L’extraordinaire se trouve au chemin des gens ordinaires.</div>
<div class="right">Paulo Coelho</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Un vrai leader n’a pas besoin de conduire. Il suffit qu’il montre le chemin.</div>
<div class="right">Henry Miller</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Aucun homme n’a reçu de la nature le droit de commander aux autres.</div>
<div class="right">Denis Diderot</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Il ya une grande différence entre gagner beaucoup d’argent et être riche.</div>
<div class="right">Marlène Dietrich</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
La beauté commence au moment ou vous décidez d’être vous-même.</div>
<div class="right">Coco Chanel</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Celui qui ne rêve pas, est déjà mort, mais il ne le sait pas.</div>
<div class="right">Jo Coeijmans</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Celui qui ferme sa porte aux erreurs, la ferme aussi aux vérités.</div>
<div class="right">Tagore</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
L’arbre se sauve en laissant tomber ses feuilles.</div>
<div class="right">Pierre Jean Jouve</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Ecrire, c’est une façon de parler sans être interrompu.</div>
<div class="right">Carla Lane</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Grand est celui qui n’a pas perdu son coeur d’enfant.</div>
<div class="right">Mencius</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Il est bon de lire entre les lignes, cela fatigue moins les yeux.</div>
<div class="right">Sacha Guitry</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Être un homme, c’est bien. Mais il y a encore mieux: être humain.</div>
<div class="right">Jules Romains</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Ce qui compte, c’est l’intensité d’une vie, pas la dureé d’une vie.</div>
<div class="right">Jacques Brel</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Il faut vivre l’instant présent, jour après jour … ici et maintenant.</div>
<div class="right">Simone Elkeles</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
On oublie le dernier rêve; on se remémore toujours le premier amour.</div>
<div class="right"> Michel Bouthot</div><br><br>
</div>
</div>
</div>
</div>
A codepen demo, including HTML, CSS and JS, can be found here ...
Nevertheless, I am still open for suggestions to solve my my initial question.
And suggestions to further improve the alternative solution are alo welcome.
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');
});
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>