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>
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>
My Bootstrap columns are equal in height no matter the size of the device (computers, tablets, phones, etc.) thanks to JavaScript's MatchHeight.
But the problem is that I also want to make the buttons inside them equal in height despite different amount of text above them. I've tried min-height, margin-bottom (aren't responsive). How can I achieve this? With bootstrap somehow, or js, or something but it's important for aesthetics!
EDIT: This is what I want to achieve: https://i.stack.imgur.com/NOlns.png
Buttons stay the same no matter what!
#section4 .divider-fullwidth {
margin-bottom: 15px;
}
#section4 .lastdivider {
margin-top: 50px;
}
#section4 .box {
margin: 1px;
margin-bottom: 30px;
padding: 5% 8%;
}
#section4 .btn {
font-size: .9em;
padding: 5% 4%;
width: 100%;
}
#section4 .innerBox {
min-height: 210px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="background_section4">
<div id="section4" class="container">
<div class="row intro">
<h2>ESCOGE TU PLAN</h2>
<p>El precio influye en el tipo y número de actividades que organizaremos, pero te aseguramos que todas son extraordinarias.</p>
</div>
<div class="row columns">
<div class="col-sm-4">
<div class="box">
<h4>
<span style="font-weight: 100;">ZZZ</span><span style="color: #e5e874; font-weight: 800;">basic</span>
</h4>
<p>
<span style="font-size: 3em; font-weight: bold;">29</span><span style="font-size: 2em; font-weight: bold;">€</span> adulto / 14€ niñ#
</p>
<div>
<p>El plan perfecto para iniciarte como. Date un capricho y pasa un día diferente.</p>
</div>
<div class="divider-fullwidth">
</div>
<div class="innerBox">
<p>
<strong>Algunos planes sorpresa que han hecho otros Zurpraisers:</strong>
</p>
<ul>
<li>
<span>Salida en catamarán + Snorkel en mar abierto</span>
</li>
<li>
<span>Visita Bodegas + Cata de vinos + Brunch entre viñedos</span>
</li>
<li>
<span>Circuito SPA privado + Copa de cava + Menú degustación</span>
</li>
<li>
<span>Menú degustación fusión cocina japonesa y mexicana</span>
</li>
</ul>
</div>
<div class="divider-fullwidth lastdivider">
</div>
<a type="button" class="btn btn-lg" href="">QUIERO MI</a>
</div>
</div>
<div class="col-sm-4">
<div class="box">
<h4>
<span style="font-weight: 100;">ZZZ</span><span style="color: #f99584; font-weight: 800;">plus</span>
</h4>
<p>
<span style="font-size: 3em; font-weight: bold;">59</span><span style="font-size: 2em; font-weight: bold;">€</span> adulto / 29€ niñ#
</p>
<div>
<p>Solo para espíritus aventureros con hambre de descubrir nuevas y emocionantes experiencias.</p>
</div>
<div class="divider-fullwidth">
</div>
<div class="innerBox">
<p>
<strong>Algunos planes sorpresa que han hecho otros:</strong>
</p>
<ul>
<li>
<span>Excursión guiada en moto acuática + Menú degustación estilo Mediterráneo</span>
</li>
<li>
<span>Masaje relajante de chocolate blanco natural + Jacuzzi de cacao + Circuito SPA privado + Curso de cata de vinos</span>
</li>
<li>
<span>Barranquismo guiado + Menú degustación</span>
</li>
</ul>
</div>
<div class="divider-fullwidth lastdivider">
</div>
<a type="button" class="btn btn-lg" href="">QUIERO MI</a>
</div>
</div>
<div class="col-sm-4">
<div class="box lastBox">
<h4>
<span style="font-weight: 100;">ZZZ</span><span style="color: #7ed9c3; font-weight: 800;">premium</span>
</h4>
<p>
<span style="font-size: 3em; font-weight: bold;">99</span><span style="font-size: 2em; font-weight: bold;">€</span> adulto / 49€ niñ#
</p>
<div>
<p>¡Vamos a lo grande! Una combinación de actividades exclusivas para ocasiones especiales.</p>
</div>
<div class="divider-fullwidth">
</div>
<div class="innerBox lastInnerBox">
<p>
<strong>Algunos planes sorpresa que han hecho otros Zurpraisers:</strong>
</p>
<ul>
<li>
<span>Vuelo en parapente biplaza + Visita bodegas + Cata de vinos + Menú degustación con maridaje exclusivo</span>
</li>
<li>
<span>Puesta de sol en velero + Degustación de ostras con cava + Cena romántica bajo las estrellas</span>
</li>
<li>
<span>Conducción de Ferrari en circuito + Bautismo de buceo + Menú degustación</span>
</li>
</ul>
</div>
<div class="divider-fullwidth lastdivider">
</div>
<a type="button" class="btn btn-lg" href="">QUIERO MI</a>
</div>
</div>
</div>
</div>
</div>
Below is the solution, I assume ,this is what you are looking for.
.box{
position: relative;
height:500px;
}
.btn{
position: absolute;
bottom:0px;
width: auto; //You can adjust the width accordingly
}
You can adjust the height of your div accordingly.
.box {
border: 1px solid black;
padding: 20px;
margin: 20px;
position: relative;
height: 440px;
}
.btn {
font-size: .9em;
float: none;
width: auto;
position: absolute;
bottom: 10px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row columns">
<div class="col-sm-4">
<div class="box">
<h4>
<span style="font-weight: 100;">ZZZ</span><span style="color: #e5e874; font-weight: 800;">basic</span>
</h4>
<p>
<span style="font-size: 3em; font-weight: bold;">29</span><span style="font-size: 2em; font-weight: bold;">€</span> adulto / 14€ niñ#
</p>
<div>
<p>El plan perfecto para iniciarte como. Date un capricho y pasa un día diferente.</p>
</div>
<div class="divider-fullwidth">
</div>
<div class="innerBox">
<p>
<strong>Algunos planes sorpresa que han hecho otros Zurpraisers:</strong>
</p>
<ul>
<li>
<span>Salida en catamarán + Snorkel en mar abierto</span>
</li>
<li>
<span>Visita Bodegas + Cata de vinos + Brunch entre viñedos</span>
</li>
<li>
<span>Circuito SPA privado + Copa de cava + Menú degustación</span>
</li>
<li>
<span>Menú degustación fusión cocina japonesa y mexicana</span>
</li>
</ul>
</div>
<div class="divider-fullwidth lastdivider">
</div>
<a type="button" class="btn btn-lg btn-primary" href="">QUIERO MI</a>
</div>
</div>
<div class="col-sm-4">
<div class="box">
<h4>
<span style="font-weight: 100;">ZZZ</span><span style="color: #f99584; font-weight: 800;">plus</span>
</h4>
<p>
<span style="font-size: 3em; font-weight: bold;">59</span><span style="font-size: 2em; font-weight: bold;">€</span> adulto / 29€ niñ#
</p>
<div>
<p>Solo para espíritus aventureros con hambre de descubrir nuevas y emocionantes experiencias.</p>
</div>
<div class="divider-fullwidth">
</div>
<div class="innerBox">
<p>
<strong>Algunos planes sorpresa que han hecho otros:</strong>
</p>
<ul>
<li>
<span>Excursión guiada en moto acuática + Menú degustación estilo Mediterráneo</span>
</li>
<li>
<span>Masaje relajante de chocolate blanco natural + Jacuzzi de cacao + Circuito SPA privado + Curso de cata de vinos</span>
</li>
<li>
<span>Barranquismo guiado + Menú degustación</span>
</li>
</ul>
</div>
<div class="divider-fullwidth lastdivider">
</div>
<a type="button" class="btn btn-lg btn-primary" href="">QUIERO MI</a>
</div>
</div>
<div class="col-sm-4">
<div class="box lastBox">
<h4>
<span style="font-weight: 100;">ZZZ</span><span style="color: #7ed9c3; font-weight: 800;">premium</span>
</h4>
<p>
<span style="font-size: 3em; font-weight: bold;">99</span><span style="font-size: 2em; font-weight: bold;">€</span> adulto / 49€ niñ#
</p>
<div>
<p>¡Vamos a lo grande! Una combinación de actividades exclusivas para ocasiones especiales.</p>
</div>
<div class="divider-fullwidth">
</div>
<div class="innerBox lastInnerBox">
<p>
<strong>Algunos planes sorpresa que han hecho otros Zurpraisers:</strong>
</p>
<ul>
<li>
<span>Vuelo en parapente biplaza + Visita bodegas + Cata de vinos + Menú degustación con maridaje exclusivo</span>
</li>
<li>
<span>Puesta de sol en velero + Degustación de ostras con cava + Cena romántica bajo las estrellas</span>
</li>
<li>
<span>Conducción de Ferrari en circuito + Bautismo de buceo + Menú degustación</span>
</li>
</ul>
</div>
<div class="divider-fullwidth lastdivider">
</div>
<a type="button" class="btn btn-lg btn-primary" href="">QUIERO MI</a>
</div>
</div>
</div>
Padding given to .box is causing the issue.
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
I am trying to create two buttons with javascript. This button will sort the movies ascending and descending.
So I am trying to sort the full divs on the values that are in the h2 and h3. I don't know how to do this in JavaScript and this is a requirement.
So what I am trying to do is sort them by row.
With the values that are in the col-md-5 h2 and h3.
<!-- Film 1 -->
<div class="row">
<div class="col-md-7">
<a href="edge-of-tommorrow.html">
<img class="img-responsive img-hover" src="img/edge-of-tommorrow-700x300.jpg" alt="">
</a>
</div>
<div class="col-md-5">
<h2>Edge of Tommorrow</h2>
<h3>8.6</h3>
<h4>Tags: Science Fiction, Oorlog, Actie</h4>
<p> Een Derde Wereldoorlog is begonnen, een oorlog van aliens tegen de mensheid. Een hoge officier (Tom Cruise) word naar het front gestuurd om te helpen bij de landing in Frankrijk en zo weer grond terug te veroveren op de aliens. </p>
<a class="btn btn-primary" href="edge-of-tommorrow.html">Bekijk Film</a>
</div>
</div>
<!-- /.row -->
<hr>
<!-- Film 2 -->
<div class="row">
<div class="col-md-7">
<a href="a-million-ways-to-die-in-the-wild-west.html">
<img class="img-responsive img-hover" src="img/a-million-ways-to-die-in-the-west-700x300.jpg" alt="">
</a>
</div>
<div class="col-md-5">
<h2>A million ways to die in the Wild West</h2>
<h3>7.2</h3>
<h4>Tags: Comedy, Western</h4>
<p>Een film waarbij je constant aan het lachen bent. Zodra de ene grap is afgelopen komt de volgende. Het gaat over een stuntelige schapenhoeder die voor de nieuwe mystrieuze vrouw in het stadje valt. Die toevallig getrouwd is met de gevaarlijkste scherpschutter van het Wilde Westen. En wat voor veel hilarische momenten zorgt.</p>
<a class="btn btn-primary" href="a-million-ways-to-die-in-the-wild-west.html">Bekijk Film</a>
</div>
</div>
<!-- /.row -->
well i think this may help :
var movies = Array.prototype.slice.call( document.getElementsByClassName("row"));
var result = "";
//descending numbers
movies.sort(function(a, b){return b.getElementsByClassName("col-md-5")[0].getElementsByTagName("h3")[0].textContent - a.getElementsByClassName("col-md-5")[0].getElementsByTagName("h3")[0].textContent});
//ascending numbers
movies.sort(function(a, b){return a.getElementsByClassName("col-md-5")[0].getElementsByTagName("h3")[0].textContent - b.getElementsByClassName("col-md-5")[0].getElementsByTagName("h3")[0].textContent});
//descending Letters
movies.sort();
//ascending Letters
movies.sort();
movies.reverse;
movies.forEach(function(entry) {
result += entry.innerHTML;
});
document.getElementById("Content").innerhtml = result;
add this to your html code :
<div id="Content">
<!--Movies-->
</div>