jQuery: Multiple close options for div - javascript

I'm having a little trouble getting this work, any help would be greatly appreciated.
When the user clicks the X the div should close, but it also closes when they click outside of the wrapper container.
I can't seem to get them both to work. The X currently isn't closing anything.
jsFiddle(sorry it's not the cleanest, but it has the HTML): https://jsfiddle.net/t0mr4psf/1/
Gif for it in action: http://imgur.com/G7h4j6g
My jQuery:
jQuery(document).ready(function($) {
$('a.open-answer').on('click', function(event) {
event.preventDefault();
event.stopPropagation();
$('.wrapper').removeClass('active');
$(this).parents('.wrapper').toggleClass('active');
});
$('.question-container .wrapper:not(.active)').on('click', function(event) {
if ( !$(this).hasClass('active')) {
event.preventDefault();
$('a.open-answer', $(this)).click();
return false;
}
});
$(this).click(function() {
$('.wrapper').removeClass('active');
});
$('.wrapper').click(function(event){
event.stopPropagation();
});
});


I think I found an answer for you, but it's still not clear based on your description and image. Working Example: https://jsfiddle.net/Twisty/mqj1fnn6/6/
HTML
<div id="content" class="site-content">
<div id="primary" class="content-area container-fluid">
<main id="main" class="site-main" role="main">
<div class="no-gutters why-school-qa">
<div id="question1" class="question-container">
<div class="wrapper has-media">
<div id="q-1" class="question">
<div id="qa-image-1" class="qaimage">
<img class="img-responsive" alt="" src="http://placehold.it/350x350" />
</div>
<h4 class="qaheader">Header</h4>
<h3 class="qaquestion">This is a Question</h3>
<div id="a-1" class="answer">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod<br />tempor incididunt ut labore et dolore magna aliqua.</p>
<a class="btn btn-blue" href="#">This is a link</a>
</div>
<i class="ti-plus">+</i>
</div>
</div>
</div>
<div id="q-2" class="question-container">
<div class="wrapper has-media">
<div class="question">
<div class="qaimage">
<img class="img-responsive" alt="" src="http://placehold.it/350x350" />
</div>
<h4 class="qaheader">Another Header</h4>
<h3 class="qaquestion">Oh look, another question?</h3>
<div id="a-2" class="answer">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
<br />tempor incididunt ut labore et dolore magna aliqua.</p>
<a class="btn btn-blue" href="http://www.fodors.com" target="_blank">This is a link</a>
</div>
<i class="ti-plus">+</i>
</div>
</div>
</div>
<div id="q-3" class="question-container">
<div class="wrapper has-media">
<div class="question">
<div class="qaimage">
<img class="img-responsive" alt="" src="http://placehold.it/350x350" />
</div>
<h4 class="qaheader">Sweet Header!</h4>
<h3 class="qaquestion">Questions with answers and stuff?</h3>
<div id="a-3" class="answer">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod<br />tempor incididunt ut labore et dolore magna aliqua.</p>
<a class="btn btn-blue" href="http://lipmanhearne.com">This is a link</a>
</div>
<i class="ti-plus">+</i>
</div>
</div>
</div>
<div id="q-4" class="question-container">
<div class="wrapper has-media">
<div class="question">
<div class="qaimage">
<img class="img-responsive" alt="" src="http://placehold.it/350x350" />
</div>
<h4 class="qaheader">Header and more HEADERS!</h4>
<h3 class="qaquestion">Questions?!</h3>
<div id="a-4" class="answer">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod<br />tempor incididunt ut labore et dolore magna aliqua.</p>
<a class="btn btn-blue" href="#">This is a link</a>
</div>
<i class="ti-plus">+</i>
</div>
</div>
</div>
<div id="q-5" class="question-container">
<div class="wrapper has-media">
<div class="question">
<div class="qaimage">
<img class="img-responsive" alt="" src="http://placehold.it/350x350" />
</div>
<h4 class="qaheader">Hmmmm?</h4>
<h3 class="qaquestion">Ok, got it. Makes sense</h3>
<div id="a-5" class="answer">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod<br />tempor incididunt ut labore et dolore magna aliqua.</p>
<a class="btn btn-blue" href="#">This is a link</a>
</div>
<i class="ti-plus">+</i>
</div>
</div>
</div>
<div id="q-6" class="question-container">
<div class="wrapper has-media">
<div class="question">
<div class="qavideo">
<iframe width="640" height="360" src="https://www.youtube.com/embed/zVXnoIoWu88?feature=oembed" frameborder="0" allowfullscreen></iframe>
</div>
<h4 class="qaheader">I am the header now!</h4>
<h3 class="qaquestion">I'm questioning the question</h3>
<div id="a-6" class="answer">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod<br />tempor incididunt ut labore et dolore magna aliqua.</p>
<a class="btn btn-blue" href="#">This is a link</a>
</div>
<i class="ti-plus">+</i>
</div>
</div>
</div>
</div>
</main>
<!-- #main -->
</div>
<!-- #primary -->
</div>
<!-- #content -->
JQUERY
$(document).ready(function () {
$('a.open-answer').click(function (e) {
e.preventDefault();
e.stopPropagation();
var self = $(this);
var isOpen = (self.text() == "x");
$("a.open").not(self).click();
if(!isOpen){
self.text("x").addClass("open");
$($(this).attr("href")).addClass("open");
} else {
self.text("+").removeClass("open");
$($(this).attr("href")).removeClass("open");
}
$(self.attr("href")).toggle();
});
$('.question-container .wrapper').click(function (e) {
e.preventDefault();
$('a.open-answer', $(this)).click();
});
$(this).click(function () {
$('a.open').click();
});
$('.wrapper').click(function (e) {
e.stopPropagation();
});
});
Giving each Question and Answer their own unique ID can be helpful for selection. The Classes can be helpful in dealing with groups or when trying to select an unknown target.
Basically doing a manual toggle here. First we capture details about the item that was clicked in self and isOpen. Next, we close any other items that are .open. Then we return to self and open it.

Related

data-filter and displaying more than one product

I have a double product filter, but they are working erratically, sometimes they work together and sometimes not, it should clean the content that is not in the filter and show the right one, but in addition to showing the wrong content of the filter it also show the correct,is there a simpler way to ralizar this filter using arrays?
$('.controll').on('click', 'li', function() {
$(this).parent().find('li').removeClass('active');
$(this).addClass('active');
gridFilter();
});
function gridFilter() {
var arr = [];
$('li.active').each(function() {
if (!$(this).attr('data-filter')) {
$(this).siblings('li').each(function() {
arr.push($(this).attr('data-filter'));
});
else {
arr.push($(this).attr('data-filter'));
console.log('arr: ' + arr);
}
});
$('.grid').each(function() {
var thisClassArr = $(this).attr('class').split(' '),
YouShallNotPass = true;
for (i in thisClassArr) {
if ($.inArray(thisClassArr[i], arr) > -1) {
console.log('ok ' + thisClassArr[i]);
YouShallNotPass = false;
break;
}
}
if (!YouShallNotPass) {
$(this).show(500);
else {
$(this).hide(0);
}
});
};
<script src="https://kit.fontawesome.com/8d610b99df.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<link rel="stylesheet" href="assets/css/style.css" crossorigin="anonymous">
<!-- Bar Menu Top RED -->
<section class="top-menu">
<div class="container">
c---------------------INFO BAR RED DESKTOP------------------->
<div class="row justify-content-around desktop">
<div class="col-3">
<p><i class="fa-regular fa-clock"></i>Segundas às sextas das 8h às 18h.</p>
</div>
<div class="col-5 ">
<p><i class="fa-solid fa-headset"></i>Fale com nosso time de especialistas: <b>0800 979 5406</b></p>
</div>
<div class="col-4">
<div class="row p-0 m-0">
<div class="col-6 ">
<i class="fa-solid fa-arrow-right-from-bracket"></i>Área do usuário</b>
</div>
<div class="col-6 ">
<i class="fa-solid fa-user"></i>Cadastre-se</b>
</div>
</div>
</div>
</div>
<!--row - desktop-->
<!-----------------------INFO BAR RED MOBILE------------------->
<div class="row align-items-center mobile">
<div class="col-4 p-0">
<p><i class="fa-solid fa-headset"></i> <b>0800 979 5406</b></p>
</div>
<div class="col-4 p-0">
<p><i class="fa-solid fa-arrow-right-from-bracket"></i>Área do usuário</b>
</p>
</div>
<div class="col-4 p-0">
<p><i class="fa-solid fa-user"></i>Cadastre-se</b>
</p>
</div>
</div>
<!--row - mobile-->
</div>
<!--container-fluid-->
</section>
<!--top-menu-->
Menu Main -->
<header id="header">
<div class="container">
<div class="row align-items-center justify-content-center ">
<a class="col-3 col-md-2 order-1 " id="logo" href="index.html">
<img src="assets/image/logo-SIC.png" alt="">
</a>
<nav class="col-3 col-md-7 order-3 order-lg-2 " id="nav">
<button aria-label="Abrir Menu" id="btn-mobile" aria-haspopup="true" aria-controls="menu" aria-expanded="false">
<span id="hamburger"></span>
</button>
<ul id="menu" role="menu">
<li>Home</li>
<li>Certificados Digitais</li>
<li>Suporte</li>
<li>Unidades</li>
<li>Contato</li>
<li>Blog</li>
</ul>
</nav>
<div class="col-6 col-md-3 order-2 order-md-3">
<div class="row">
<div class="col-md-2 align-self-center icon-cart"><i class="fa-solid fa-cart-shopping"></i></div>
<div class="col-12 col-lg-10">
<button>Meu Certificado</button>
</div>
</div>
</div>
</div>
</div>
</header>
Banner Page -->
<section class="banner-page">
<div class="container">
<div class="row align-items-center">
<div class="col-12 col-lg-6">
<h1>O que é um <br> <b>certificado e-CNPJ?</b></h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.</p>
</div>
</div>
</div>
</section>
Filter -->
<section class="filter">
<div class="container">
<div class="row justify-content-start ">
<div class=" controll col-12 col-md-6">
<span>Escolha por Validade</span>
<ul class=" ">
<li data-filter="" class="active">Todos</li>
<li data-filter="meses-12">12 Meses</li>
<li data-filter="meses-24">24 Meses</li>
<li data-filter="meses-36">36 Meses</li>
</ul>
</div>
<div class=" controll col-12 col-md-6">
<span>Escolha por Tipo</span>
<ul class="">
<li data-filter="" class="active">Todos</li>
<li data-filter="cartao">Cartão</li>
<li data-filter="token">Token</li>
<li data-filter="cartaoleitora">Cartão + Leitora</li>
<li data-filter="sem">Sem Mídia</li>
</ul>
</div>
</div>
<div class="row justify-content-start">
<div class=" grid meses-36 sem col-12 col-md-4">
<div class="box-certificado ">
<h4>36 meses / Sem mídias</h4>
<img src="assets/image/produto_a1.png" alt="Certificado A1">
<span class="discount">DE R$160,00</span>
<p class="price">R$ 120</p>
<p class="desc">Certificado digital indicado para <b>pessoa física.</b></p>
<ul class="itens">
<li>Validade de até 3 anos </li>
<li> Parcele em até 12x</li>
<li>Renovação Online</li>
<li>Suporte dedicado</li>
</ul>
Comprar
<blockquote>Informações sobre segurança.</blockquote>
</div>
</div>
<div class=" grid meses-24 col-12 col-md-4">
<div class="box-certificado ">
<h4>24 meses</h4>
<img src="assets/image/produto_a1.png" alt="Certificado A1">
<span class="discount">DE R$160,00</span>
<p class="price">R$ 120</p>
<p class="desc">Certificado digital indicado para <b>pessoa física.</b></p>
<ul class="itens">
<li>Validade de até 3 anos </li>
<li> Parcele em até 12x</li>
<li>Renovação Online</li>
<li>Suporte dedicado</li>
</ul>
Comprar
<blockquote>Informações sobre segurança.</blockquote>
</div>
</div>
<div class=" grid cartao col-12 col-md-4">
<div class="box-certificado ">
<h4>Cartão</h4>
<img src="assets/image/produto_a1.png" alt="Certificado A1">
<span class="discount">DE R$160,00</span>
<p class="price">R$ 120</p>
<p class="desc">Certificado digital indicado para <b>pessoa física.</b></p>
<ul class="itens">
<li>Validade de até 3 anos </li>
<li> Parcele em até 12x</li>
<li>Renovação Online</li>
<li>Suporte dedicado</li>
</ul>
Comprar
<blockquote>Informações sobre segurança.</blockquote>
</div>
</div>
<div class=" grid meses-12 col-12 col-md-4">
<div class="box-certificado ">
<h4>12 meses</h4>
<img src="assets/image/produto_a1.png" alt="Certificado A1">
<span class="discount">DE R$160,00</span>
<p class="price">R$ 120</p>
<p class="desc">Certificado digital indicado para <b>pessoa física.</b></p>
<ul class="itens">
<li>Validade de até 3 anos </li>
<li> Parcele em até 12x</li>
<li>Renovação Online</li>
<li>Suporte dedicado</li>
</ul>
Comprar
<blockquote>Informações sobre segurança.</blockquote>
</div>
</div>
<div class=" grid token col-12 col-md-4">
<div class="box-certificado ">
<h4>Token</h4>
<img src="assets/image/produto_a1.png" alt="Certificado A1">
<span class="discount">DE R$160,00</span>
<p class="price">R$ 120</p>
<p class="desc">Certificado digital indicado para <b>pessoa física.</b></p>
<ul class="itens">
<li>Validade de até 3 anos </li>
<li> Parcele em até 12x</li>
<li>Renovação Online</li>
<li>Suporte dedicado</li>
</ul>
Comprar
<blockquote>Informações sobre segurança.</blockquote>
</div>
</div>
<div class=" grid meses12 token col-12 col-md-4">
<div class="box-certificado ">
<h4>12 meses / Token</h4>
<img src="assets/image/produto_a1.png" alt="Certificado A1">
<span class="discount">DE R$160,00</span>
<p class="price">R$ 120</p>
<p class="desc">Certificado digital indicado para <b>pessoa física.</b></p>
<ul class="itens">
<li>Validade de até 3 anos </li>
<li> Parcele em até 12x</li>
<li>Renovação Online</li>
<li>Suporte dedicado</li>
</ul>
Comprar
<blockquote>Informações sobre segurança.</blockquote>
</div>
</div>
</div>
</div>
</div>
</section>
certificado -->
<section class="certificado">
<div class="container">
<div class="row justify-content-center align-items-center">
<div class="col-12 col-lg-7">
<p>Escolha o tipo de certificado</p>
<div class="box-red row align-items-center">
<div class="col-2 "><a class="" href="">e-CNPJ</a> </div>
<div class="col-2">e-CPF </div>
<div class="col-2">NF-e </div>
<div class="col-2">PJ-e </div>
<div class="col-2">e-Profissional </div>
<div class="col-2">CT-e </div>
</div>
</div>
</div>
</div>
</section>
<!--Step Compra-->
<section class="step">
<div class="container">
<div class="row justify-content-center align-items-center">
<div class="col-12">
<h2>Passo a passo de <b>compra</b></h2>
</div>
<!--Step Desktop-->
<div class="col-12 desktop">
<div class="row line-progress">
<div class="col-12 col-lg-4">
<h3>Escolha o seu certificado</h3>
<img src="./assets/image/search.png" alt="Escolha o seu certificado">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.</p>
<button>Escolha o seu</button>
</div>
<div class="col-12 col-lg-4">
<h3>Agende sua avaliação</h3>
<img src="./assets/image/checklist.png" alt="Escolha o seu certificado">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.</p>
<button>Documentação</button>
</div>
<div class="col-12 col-lg-4">
<h3>Setup e instalação</h3>
<img src="./assets/image/setup.png" alt="Escolha o seu certificado">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.</p>
<button>Agendamento</button>
</div>
</div>
</div>
<!-- end Step Desktop-->
<!--Step mobile-->
<div class="col-12 mobile">
<div class="row flex-nowrap line-progress">
<div class="col-12 col-lg-4">
<h3>Escolha o seu <br> certificado</h3>
<img src="./assets/image/primeiro.png" alt="Escolha o seu certificado">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.</p>
<button>Escolha o seu</button>
</div>
<div class="col-12 col-lg-4">
<h3>Agende sua <br> avaliação</h3>
<img src="./assets/image/segundo.png" alt="Escolha o seu certificado">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.</p>
<button>Documentação</button>
</div>
<div class="col-12 col-lg-4">
<h3>Setup e <br> instalação</h3>
<img src="./assets/image/terceiro.png" alt="Escolha o seu certificado">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.</p>
<button>Agendamento</button>
</div>
</div>
</div>
<!-- end Step mobile-->
</div>
</div>
</section>
<!--Step Compra-->
<!--CTA Home-->
<section class="cta-home">
<div class="container">
<h3>Qual certificado escolher?</h3>
<p>Não se preocupe, nosso time de especialistas tem a resposta.</p>
<button>Fale Conosco</button>
</div>
</section>
<!--CTA Home-->
<!--FAQ-->
<section class="faq">
<div class="container">
<h3>Perguntas <b>frequentes</b></h3>
<p>Preparamos algumas perguntas e respotas para sanar as suas prencipais dúvidas sobre o assunto.</p>
<div class="accordion">
<div class="accordion-item">
<button id="accordion-button-1" aria-expanded="false"><span class="accordion-title">O que é Certificado Digital?<span><span class="icon" aria-hidden="true"></span></button>
<div class="accordion-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra suspendisse potenti.</p>
</div>
</div>
<div class="accordion-item">
<button id="accordion-button-2" aria-expanded="false"><span class="accordion-title">Pra que ser Certificado Digital</span><span class="icon" aria-hidden="true"></span></button>
<div class="accordion-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra suspendisse potenti.</p>
</div>
</div>
<div class="accordion-item">
<button id="accordion-button-3" aria-expanded="false"><span class="accordion-title">Como Obter Certificado Digital</span><span class="icon" aria-hidden="true"></span></button>
<div class="accordion-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra suspendisse potenti.</p>
</div>
</div>
<div class="accordion-item">
<button id="accordion-button-4" aria-expanded="false"><span class="accordion-title">Quanto custa Certificado Digital?</span><span class="icon" aria-hidden="true"></span></button>
<div class="accordion-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra suspendisse potenti.</p>
</div>
</div>
<div class="accordion-item">
<button id="accordion-button-5" aria-expanded="false"><span class="accordion-title">Quais os tipos Certificado Digital?</span><span class="icon" aria-hidden="true"></span></button>
<div class="accordion-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra suspendisse potenti.</p>
</div>
</div>
<div class="accordion-item">
<button id="accordion-button-5" aria-expanded="false"><span class="accordion-title">Qual a validade Certificado Digital</span><span class="icon" aria-hidden="true"></span></button>
<div class="accordion-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra suspendisse potenti.</p>
</div>
</div>
<div class="accordion-item">
<button id="accordion-button-5" aria-expanded="false"><span class="accordion-title">Quem precisa Certificado Digital</span><span class="icon" aria-hidden="true"></span></button>
<div class="accordion-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra suspendisse potenti.</p>
</div>
</div>
</div>
</div>
</section>
<!--Icones Contato-->
<section class="icones-contato">
<div class="container">
<div class="row justify-content-center align-items-center">
<div class="col-12 col-lg-4">
<img src="assets/image/phone.png" alt="">
<p><b>0800 979 5406</b> Fale conosco e tire suas dúvidas através do nosso 0800.
</p>
</div>
<div class="col-12 col-lg-4">
<img src="assets/image/whatsapp.png" alt="">
<p><b>(27) 99979-0351</b> Fale conosco, a SIC Digital também está no WhatsApp.
</p>
</div>
<div class="col-12 col-lg-4">
<img src="assets/image/chat.png" alt="">
<p><b>Live Chat</b> tilize nosso chat ao vivo para tirar suas dúvidas.
</p>
</div>
</div>
</div>
</section>
<!--FOOTER-->
<footer class="footer">
<div class="container">
<div class="row ">
<div class="col-12 col-lg-4 info-footer">
<img class="logo-footer" src="assets/image/logo-branco.png" alt="SIC">
<p>
SIC Certificação Digital Ltda-ME CNPJ: 18.178.945/0001-63 Telefone: 0800 979 5406 / 27 2104-1578
</p>
<p>
Endereço: Av. N. S. dos Navegantes, 451, Ed. Petro Tower, lj 20 - Enseada do Suá - Vitória / ES - 29050305
</p>
<p>
Email: contato#sicdigital.com.br Todos os direitos reservados.
</p>
<div class="row
justify-content-center justify-content-lg-start instituicoes">
<div class=" col-2 col-lg-4">
<img src="assets/image/icp-logo.png" alt="ICP">
</div>
<div class="col-2 col-lg-4">
<img src="assets/image/logo-receita.png" alt="Receita Federal">
</div>
</div>
</div>
<!--COL- INFO FOOTER-->
<div class="col-12 col-lg-4 info-endereco ">
<h4>Locais de atendimento</h4>
<ul>
<li class="icon-map"> <b>Cariacica</b> - Espirito Santo </li>
<li class="icon-map">
<b>São Mateus</b> - Espirito Santo
</li>
<li class="icon-map"> <b>Serra</b> - Espirito Santo </li>
<li class="icon-map"> <b>Vila Velha</b> - Espirito Santo </li>
<li class="icon-map">
<b>Vitória</b> - Espirito Santo
</li>
<li class="icon-map">
<b>Vitória</b> - Espirito Santo
</li>
<li class="icon-map"> <b>Rio de Janeiro</b> -RJ </li>
</ul>
</div>
<div class="col-12 col-lg-4 info-institucional">
<h4>Institucional</h4>
<div>
<a href="repositorio.html"><b>Repositório</b>
Documentação da AC SIC</a>
</div>
<div>
<a href="politica-de-privacidade.html"><b>Política de Privacidade</b>
Seus dados estão seguros.</a>
</div>
<div>
<a href="plano-de-garantia.html"><b>Política de Garantia</b>
Conheça seus direitos.</a>
</div>
<div>
<b>Revogação</b> Informações sobre a revogação do seu certificado.
</div>
<h4 class="pay">Formas de Pagamento</h4>
<img src="assets/image/bandeiras_cartoes.png" alt="Formas de Pagamento">
</div>
</div>
</div>
</footer>
<div class="copy">
<div class="container">
<p>©️ Copyright 2022 - Todos os direitos reservados. SIC Certificação Digital LTDA-ME</p>
</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.min.js" integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2" crossorigin="anonymous"></script>
<script src="assets/js/isotope.pkgd.js.js"></script>
<script src="assets/js/main.js"></script>
I tried to make the two filters work perfectly together, in some elements it applies display:none and in others it doesn't

Change location of div when element is shown

I’m having 3 titles with a button underneath to show more info about the subject.
I made a script to show/hide div on the button click. When I’m on a small device the div shows underneath the subject (just like I want) as you can see here:
This is correct on small devices
But when I’m on a desktop and the subjects are next to each other the div that shows pushes the other subject to the bottom.
I would like to have the show div to be underneath the 3 subjects.
This is wrong:
This is wrong
How they all sould be
Anny idea on how to do this?
Also, is the a way to only show one div at the time, so when I open a new div, the previous one should close.
HTML:
<!-- TOP 3 SERVICES -->
<div class="container">
<div class="row">
<div class="col-md-4 col-12 text-center mt-5">
<img src="images/index/tijd.png" alt="time" class="mb-5 img-fluid">
<h2>Always on time</h2>
<button class="btn mybtn mt-2" onclick="showInfo('tijd')">See more</button>
</div>
<div class="service-detail mt-5 service-detail" id="tijd">
<div class="col-12 col-md-8 offset-md-2 text-center">
<h1 class="mt-5"><img src="images/index/tijd.png" alt="" class="mr-5">Always on time</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore
et dolore magna aliqua consectetur adipiscing elit.
<br>
<br>
Duis aute irure dolor in reprehenderit in voluptate consectetur adipiscing elit.</p>
<button class="btn mybtn mt-2 col-12 col-md-4" onclick="showInfo('tijd')">See less</button>
</div>
</div>
<div class="col-md-4 col-12 text-center mt-5">
<img src="images/index/trust.png" alt="trust" class="mb-5 img-fluid">
<h2>Trust</h2>
<button class="btn mybtn mt-2" onclick="showInfo('trust')">See more</button>
</div>
<div class="service-detail mt-5 service-detail" id="trust">
<div class="col-12 col-md-8 offset-md-2 text-center">
<h1 class="mt-5"><img src="images/index/trust.png" alt="" class="mr-5">Trust</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore
et dolore magna aliqua consectetur adipiscing elit.
<br>
<br>
Duis aute irure dolor in reprehenderit in voluptate consectetur adipiscing elit.</p>
<button class="btn mybtn mt-2 col-12 col-md-4" onclick="showInfo('trust')">See less</button>
</div>
</div>
<div class="col-md-4 col-12 text-center mt-5 mb-5">
<img src="images/index/24.png" alt="24/7" class="mb-5 img-fluid">
<h2>24/7 support</h2>
<button class="btn mybtn mt-2" onclick="showInfo('24')">See more</button>
</div>
</div>
<div class="service-detail mt-5 service-detail" id="24">
<div class="col-12 col-md-8 offset-md-2 text-center">
<h1 class="pt-5"><img src="images/index/24.png" alt="" class="mr-5">24/7 support</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore
et dolore magna aliqua consectetur adipiscing elit.
<br>
<br>
Duis aute irure dolor in reprehenderit in voluptate consectetur adipiscing elit.</p>
<button class="btn mybtn mt-2 col-12 col-md-4" onclick="showInfo('24')">See less</button>
</div>
</div>
</div>
JS:
function showInfo(id) {
var a = document.getElementById(id);
if (a.style.display === "block") {
a.style.display = "none";
} else {
a.style.display = "block";
}
}

put div with class "service-detail" inside col-md-4
Use bootstrap accordion for closing previous div, on opening of new one
https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_collapsible_accordion&stacked=h

You are using bootstrap grid system.
The div was not divided properly
I have just included all the "service detail" class in 'col-md-4'
This is the correct code:-
<div class="container">
<div class="row">
<div class="col-md-4 col-12 text-center mt-5">
<img src="images/index/tijd.png" alt="time" class="mb-5 img-fluid">
<h2>Always on time</h2>
<button class="btn mybtn mt-2" onclick="showInfo('tijd')">See more</button>
</div>
<div class="col-md-4">
<div class="service-detail mt-5 service-detail" id="tijd">
<div class="col-12 col-md-8 offset-md-2 text-center">
<h1 class="mt-5"><img src="images/index/tijd.png" alt="" class="mr-5">Always on time</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore
et dolore magna aliqua consectetur adipiscing elit.
<br>
<br>
Duis aute irure dolor in reprehenderit in voluptate consectetur adipiscing elit.</p>
<button class="btn mybtn mt-2 col-12 col-md-4" onclick="showInfo('tijd')">See less</button>
</div>
</div>
</div>
<div class="col-md-4 col-12 text-center mt-5">
<img src="images/index/trust.png" alt="trust" class="mb-5 img-fluid">
<h2>Trust</h2>
<button class="btn mybtn mt-2" onclick="showInfo('trust')">See more</button>
</div>
<div class="col-md-4">
<div class="service-detail mt-5 service-detail" id="trust">
<div class="col-12 col-md-8 offset-md-2 text-center">
<h1 class="mt-5"><img src="images/index/trust.png" alt="" class="mr-5">Trust</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore
et dolore magna aliqua consectetur adipiscing elit.
<br>
<br>
Duis aute irure dolor in reprehenderit in voluptate consectetur adipiscing elit.</p>
<button class="btn mybtn mt-2 col-12 col-md-4" onclick="showInfo('trust')">See less</button>
</div>
</div>
</div>
<div class="col-md-4 col-12 text-center mt-5 mb-5">
<img src="images/index/24.png" alt="24/7" class="mb-5 img-fluid">
<h2>24/7 support</h2>
<button class="btn mybtn mt-2" onclick="showInfo('24')">See more</button>
</div>
</div>
<div class="col-md-4">
<div class="service-detail mt-5 service-detail" id="24">
<div class="col-12 col-md-8 offset-md-2 text-center">
<h1 class="pt-5"><img src="images/index/24.png" alt="" class="mr-5">24/7 support</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore
et dolore magna aliqua consectetur adipiscing elit.
<br>
<br>
Duis aute irure dolor in reprehenderit in voluptate consectetur adipiscing elit.</p>
<button class="btn mybtn mt-2 col-12 col-md-4" onclick="showInfo('24')">See less</button>
</div>
</div>
</div>

The following code does not require any additional JavaScript because it does the job with native Bootstrap 4 classes alone and I believe it does what you want. (you might want to fix a few minor things but in general, that should be it):
<!-- TOP 3 SERVICES -->
<div class="container">
<div class="row" id="myAccordion" data-children=".item">
<div class="col-12 col-md-4 text-center mt-5 order-1 order-md-1">
<img src="images/index/tijd.png" alt="time" class="mb-5 img-fluid">
<h2>Always on time</h2>
<button class="btn mybtn mt-2 mb-2 mb-md-5" data-toggle="collapse" data-parent="#myAccordion" data-target="#panel1" aria-expanded="false" aria-controls="panel1">See more</button>
</div><!-- col -->
<div class="item order-2 order-md-4"><!-- order-2 moves this div to 2nd position on small screens i.e. underneath the previous -->
<div class="col-12 col-md-8 offset-md-2 text-center collapse service-detail mt-5" id="panel1"><!-- for toggle functionality this column needs to be wrapped in a div with the .item class -->
<h1 class="mt-5"><img src="images/index/tijd.png" alt="" class="mr-5">Always on time</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua consectetur adipiscing elit.
<br>
<br> Duis aute irure dolor in reprehenderit in voluptate consectetur adipiscing elit.</p>
<!-- <button class="btn mybtn mt-2 col-12 col-md-4" onclick="showInfo('tijd')">See less</button>-->
</div><!-- col -->
</div><!-- item -->
<div class="col-12 col-md-4 text-center mt-5 mt-md-5 order-3 order-md-2"><!-- order-3 is what makes it show in the desired order on smaller screens; order-md-2 means it's gonna come in second place on medium screens -->
<img src="images/index/trust.png" alt="trust" class="mb-5 img-fluid">
<h2>Trust</h2>
<button class="btn mybtn mt-2 mb-2 mb-md-5" data-toggle="collapse" data-parent="#myAccordion" data-target="#panel2" aria-expanded="false" aria-controls="panel2">See more</button>
</div><!-- col -->
<div class="item order-4 order-md-5"><!-- order-4 moves this div to 4th position on small screens i.e. underneath the previous -->
<div class="col-12 col-md-8 offset-md-2 text-center collapse service-detail mt-5" id="panel2"><!-- for toggle functionality this column needs to be wrapped in a div with the .item class -->
<h1 class="mt-5"><img src="images/index/trust.png" alt="" class="mr-5">Trust</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua consectetur adipiscing elit.
<br>
<br> Duis aute irure dolor in reprehenderit in voluptate consectetur adipiscing elit.</p>
<!-- <button class="btn mybtn mt-2 col-12 col-md-4" onclick="showInfo('trust')">See less</button>-->
</div><!-- col -->
</div><!-- item -->
<div class="col-12 col-md-4 text-center mt-5 order-5 order-md-3"><!-- order-5 is what makes it show in the desired order on smaller screens; order-md-3 means it's gonna come in 3rd place on medium screens -->
<img src="images/index/24.png" alt="24/7" class="mb-5 img-fluid">
<h2>24/7 support</h2>
<button class="btn mybtn mt-2 mb-2 mb-md-5" data-toggle="collapse" data-parent="#myAccordion" data-target="#panel3" aria-expanded="false" aria-controls="panel3">See more</button>
</div><!-- col -->
<div class="item order-6"><!-- order-6 is still necessary here because otherwise this div would show on top of all others -->
<div class="col-12 col-md-8 offset-md-2 text-center collapse service-detail mt-5" id="panel3"><!-- for toggle functionality this column needs to be wrapped in a div with the .item class -->
<h1 class="pt-5"><img src="images/index/24.png" alt="" class="mr-5">24/7 support</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua consectetur adipiscing elit.
<br>
<br> Duis aute irure dolor in reprehenderit in voluptate consectetur adipiscing elit.</p>
<!-- <button class="btn mybtn mt-2 col-12 col-md-4" onclick="showInfo('24')">See less</button>-->
</div><!-- col -->
</div><!-- item -->
</div><!-- .row #myAccordion -->
</div><!-- container -->
For further customization you should study the documentation on this page:
https://getbootstrap.com/docs/4.0/components/collapse/

Get the variable from the function and concatenation to post the another div using jquery

I am getting the alert of firmness,latex and thickness values in separate function.But I have to concatenation of three alert variable and pass to another div class function.concatenation value are post to the other function variables of div class
My Html:
<form id="samplecode" name="samplecode" method="POST" action="">
<div id='div1'>
<div class="col-md-12">
<div class='row'>
<div class="col-md-7 step-function">
<div class="form-group ">
<label class="one-step" >Step One:Choose a Support Layer</label>
</div>
<div class="col-md-12">
<label class=" fireness-name" >Firmness</label>
</div>
<div class="col-md-12 form-group">
<div class="col-md-4 col-lg-4 drop-menu">
<select class="form-control" id="mySelect" name="mySelect" >
<option value="" >select Firmness</option>
<option value="Soft">SOFT</option>
<option value="Hard">HARD</option>
<option value="Thickness">THICKNESS</option>
</select>
</div>
<!-- <div class="col-md-1"> <img src='img/hard.jpg' id="image" class='img-hard' alt=''> </div> -->
<div id="Soft" class='col-md-8 value'>
<p> You select Soft.</p>
</div>
<div id="Hard" class='col-md-8 value'>
<p> You select Hard.</p>
</div>
<div id="Thickness" class='col-md-8 value'>
<p> You select thickness.</p>
</div>
</div>
<div class="col-md-12">
<label class=" fireness-name" name="dropdown" >Material</label>
</div>
<div class="col-md-12 form-group">
<div class="col-md-4 col-lg-4 drop-menu">
<label for="imageselect">
<img src="img/latex.jpg" id="image" class="selectimage" alt='' />
<input id="imageselect" name="imageselect" type="radio" style="display:none;" value="latex" />
</label>
</div>
<div class='col-md-8'>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="col-md-12">
<label class=" fireness-name" name="dropdown" >Thickness</label>
</div>
<div class="col-md-12 form-group">
<div class="col-md-4 col-lg-4 drop-menu">
<select class="form-control" id="Select" name="Select" >
<option value="" >select Thickness</option>
<option value="Thick1">1</option>
<option value="Thick2">2</option>
<option value="Thick3">3</option>
</select>
</div>
<div id="Thick1" class='col-md-8 value'>
<p> You select Thickness1.</p>
</div>
<div id="Thick2" class='col-md-8 value'>
<p> You select Thickness2.</p>
</div>
<div id="Thick3" class='col-md-8 value'>
<p> You select Thickness3.</p>
</div>
</div>
</div>
<div class='row'>
<div class="col-md-5">
<img class="cust-image-size" src='img/cust.jpg'>
</div>
</div>
</div>
</div>
<div class='col-md-7 anchor'>
<div class='pull-right'>
<a href='#' id="summer" class='next-color'>Next &#10095❯</a>
</div>
<div class=' pull-left ' >
<a href='#Pre' id="summerpre" class='next-color'><span>&#10094❮</span>Previous </a>
</div>
</div>
</div>
</form>
<!--closing first one div class -->
<!-- Second Comfort Layer container -->
<div class='container' id='div2' style="display:none;">
<div class="col-md-12" >
<div class='row'>
<div class="col-md-7 step-function">
<div class="form-group ">
<label class="one-step" >Step Two:Choose a Comfort Layer</label>
</div>
<div class="col-md-12">
<label class=" fireness-name" >Softness</label>
</div>
<div class="col-md-12 form-group">
<div class="col-md-4 col-lg-4 drop-menu">
<select class="form-control" id="sel1">
<option style="display:hidden;">select Softness</option>
<option value="Soft">MEDIUM SOFT</option>
<option value="Hard">MEDIUM HARD</option>
<option value="Thickness">MEDIUM THICKNESS</option>
</select>
</div>
<div class='col-md-8'>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="col-md-12">
<label class=" fireness-name" name="dropdown" >Material</label>
</div>
<div class="col-md-12 form-group">
<div class="col-md-4 col-lg-4 drop-menu">
<img src='img/latex.jpg' alt=''>
</div>
<div class='col-md-8'>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="col-md-12">
<label class=" fireness-name" name="dropdown" >Thickness</label>
</div>
<div class="col-md-12 form-group">
<div class="col-md-4 col-lg-4 drop-menu">
<select class="form-control" id="sel1">
<option style="display:hidden;">select Thickness</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
<div class='col-md-8'>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
<div class='row'>
<div class="col-md-5">
<img class="cust-image-size" src='img/cust.jpg'>
</div>
</div>
</div>
</div>
<div class='col-md-7'>
<div class='pull-right anchor'>
<a href='#' id='summer2' class='next-color'>Next &#10095❯</a>
</div>
<div class=' pull-left anchor' >
<a href='#Pre' id="summer1" class='next-color'><span>&#10094❮</span>Previous </a>
</div>
</div>
</div>
Jquery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
$("#summerpre").click(function(){
$('div[id ^=div]').hide();
$("#div1").show();
});
//div 1 previous
$("#summer1").click(function(){
$('div[id ^=div]').hide();
$("#div1").show();
});
$(document).ready(function()
{
$('#samplecode').validate({
rules: {
mySelect: {
required: true
},
Select: {
required: true
},
imageselect:{
required: true
}
},
messages: {
mySelect: {
required: 'Please select a Firmness'
},
Select: {
required: 'Please select a Thickness'
},
imageselect:{
required: 'Please select the Image'
}
},
submitHandler: function(){
$('div[id ^=div]').hide();
$("#div2").show();
return false;
}
});
$("#summer").click(function() {
$("#samplecode").submit();
});
$(function(){
$('.value').hide();
$('#mySelect').change(function(){
$(this).find("option").each(function()
{
$('#' + this.value).hide();
});
//declare the variable to pass
var firmness = $(this).val();
$('#' + this.value).show();
alert(firmness);
//I am getting alert here and pass the variable to another function
});
});
var radio = $(this).val();
$('.selectimage').click(function() {
var img = $(this).css({border: '4px solid red'});
$('input').on('change', function() {
//declare the variable to pass
var radio=$('input[name="imageselect"]:checked').val();
var radio =$(this).val();
alert(radio);
//I am getting alert here and pass the variable to another function
//alert the vale fireness
});
});
$('.value').hide();
$('#Select').change(function()
{
$(this).find("option").each(function()
{
$('#' + this.value).hide();
});
$('#' + this.value).show();
//declare the variable to pass
var Thickness=$(this).val();
//alert the vale fireness
alert(Thickness);
//I am getting alert here and pass the variable to another function
//I have two concatenation of thee alert in jquery
});
});

Trying to debug Adjacent JSX elements error

I keep getting a Adjacent JSX elements must be wrapped in an enclosing tag error.
How do you debug JSX and where are the errors?
var React = require('react');
var Home = React.createClass({
render: function () {
return (
<div>
<header>
<div className="container">
<div className="row">
<div className="col-md-12">
<h1>Hello World</h1>
<p className="lead">This is an Awesome App Landing Page</p>
<div className="carousel-iphone">
<div id="carousel-example-generic" className="carousel slide">
<ol className="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" className="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<div className="carousel-inner">
<div className="item active">
<img src="img/screenshots/app-1.png" alt="App Screen 1"></img>
</div>
<div className="item">
<img src="img/screenshots/app-2.png" alt="App Screen 2" ></img>
</div>
<div className="item">
<img src="img/screenshots/app-3.png" alt="App Screen 3" ></img>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
</div>
<div>
<section className="purchase">
<div className="container">
<div className="row">
<div className="col-md-offset-2 col-md-8">
<h1>Everything's easily customizable.</h1>
<p className="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
<button type="button" className="app-store"></button>
</div>
</div>
</div>
</section>
</div>
<div>
<section className="payoff">
<div className="container">
<div className="row">
<div className="col-md-12">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</h1>
</div>
</div>
</div>
</section>
</div>
<div>
<section className="detail">
<div className="container">
<div className="row">
<div className="col-md-12">
<div id="carousel-example-generic-2" className="carousel slide">
<div className="carousel-inner">
<div className="item active">
<div className="row">
<div className="col-sm-12 col-md-offset-1 col-md-6">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
</div>
<div className="col-sm-12 col-md-5">
<div className="app-screenshot">
<img src="img/screenshots/app-1.png" className="img-responsive" alt="App Screen 1">
</div>
</div>
</div>
</div>
<div className="item">
<div className="row">
<div className="col-sm-12 col-md-offset-1 col-md-6">
<h1>Sed do eiusmod tempor incididunt ut labore et dolore magna.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
</div>
<div className="col-sm-12 col-md-5">
<div className="app-screenshot">
<img src="img/screenshots/app-2.png" className="img-responsive" alt="App Screen 2">
</div>
</div>
</div>
</div>
<div className="item">
<div className="row">
<div className="col-sm-12 col-md-offset-1 col-md-6">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
</div>
<div className="col-sm-12 col-md-5">
<div className="app-screenshot">
<img src="img/screenshots/app-3.png" className="img-responsive" alt="App Screen 3">
</div>
</div>
</div>
</div>
</div>
<ol className="carousel-indicators">
<li data-target="#carousel-example-generic-2" data-slide-to="0" className="active"></li>
<li data-target="#carousel-example-generic-2" data-slide-to="1"></li>
<li data-target="#carousel-example-generic-2" data-slide-to="2"></li>
</ol>
</div>
</div>
</div>
</div>
</section>
</div>
<div>
<section className="features">
<div className="container">
<div className="row">
<div className="col-md-4">
<div className="circle"><i className="icon-bookmark"></i></div>
<h2>Quick & Easy Setup</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
</div>
<div className="col-md-4">
<div className="circle"><i className="icon-keypad"></i></div>
<h2>Parallax Scrolling</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
</div>
<div className="col-md-4">
<div className="circle"><i className="icon-like"></i></div>
<h2>Responsive Design</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
</div>
</div>
</div>
</section>
</div>
<div>
<section className="social">
<div className="container">
<div className="row">
<div className="col-md-12">
<h2>Connect with us</h2>
<a className="icon-facebook"></a>
<a className="icon-twitter"></a>
<a className="icon-google"></a>
<a className="icon-instagram"></a>
<a className="icon-pinterest"></a>
</div>
</div>
</div>
</section>
</div>
<div>
<section className="get-it">
<div className="container">
<div className="row">
<div className="col-md-12">
<h1>Avaialable now on the App Store</h1>
<p className="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
<button type="button" className="app-store"></button>
</div>
<div className="col-md-12">
<hr />
<ul>
<li>Contact</li>
<li>Twitter</li>
<li>Press</li>
<li>Support</li>
<li>Developers</li>
<li>Privacy</li>
</ul>
</div>
</div>
</div>
</section>
</div>
);
}
});
module.exports = Home;

The reason for that error is that you have several div's that are siblings to one another. The way to fix this is to enclose all the div's you have in your code by another enclosing tag (in your case it seems like another div tag should do the trick.
I added <div id="closingDiv">. I would give this code a try:
var React = require('react');
var Home = React.createClass({
render: function () {
return (
<div id="closingDiv">
<div>
<header>
<div className="container">
<div className="row">
<div className="col-md-12">
<h1>Hello World</h1>
<p className="lead">This is an Awesome App Landing Page</p>
<div className="carousel-iphone">
<div id="carousel-example-generic" className="carousel slide">
<ol className="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" className="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<div className="carousel-inner">
<div className="item active">
<img src="img/screenshots/app-1.png" alt="App Screen 1"></img>
</div>
<div className="item">
<img src="img/screenshots/app-2.png" alt="App Screen 2" ></img>
</div>
<div className="item">
<img src="img/screenshots/app-3.png" alt="App Screen 3" ></img>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
</div>
<div>
<section className="purchase">
<div className="container">
<div className="row">
<div className="col-md-offset-2 col-md-8">
<h1>Everything\'s easily customizable.</h1>
<p className="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
<button type="button" className="app-store"></button>
</div>
</div>
</div>
</section>
</div>
<div>
<section className="payoff">
<div className="container">
<div className="row">
<div className="col-md-12">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</h1>
</div>
</div>
</div>
</section>
</div>
<div>
<section className="detail">
<div className="container">
<div className="row">
<div className="col-md-12">
<div id="carousel-example-generic-2" className="carousel slide">
<div className="carousel-inner">
<div className="item active">
<div className="row">
<div className="col-sm-12 col-md-offset-1 col-md-6">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
</div>
<div className="col-sm-12 col-md-5">
<div className="app-screenshot">
<img src="img/screenshots/app-1.png" className="img-responsive" alt="App Screen 1">
</div>
</div>
</div>
</div>
<div className="item">
<div className="row">
<div className="col-sm-12 col-md-offset-1 col-md-6">
<h1>Sed do eiusmod tempor incididunt ut labore et dolore magna.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
</div>
<div className="col-sm-12 col-md-5">
<div className="app-screenshot">
<img src="img/screenshots/app-2.png" className="img-responsive" alt="App Screen 2">
</div>
</div>
</div>
</div>
<div className="item">
<div className="row">
<div className="col-sm-12 col-md-offset-1 col-md-6">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
</div>
<div className="col-sm-12 col-md-5">
<div className="app-screenshot">
<img src="img/screenshots/app-3.png" className="img-responsive" alt="App Screen 3">
</div>
</div>
</div>
</div>
</div>
<ol className="carousel-indicators">
<li data-target="#carousel-example-generic-2" data-slide-to="0" className="active"></li>
<li data-target="#carousel-example-generic-2" data-slide-to="1"></li>
<li data-target="#carousel-example-generic-2" data-slide-to="2"></li>
</ol>
</div>
</div>
</div>
</div>
</section>
</div>
<div>
<section className="features">
<div className="container">
<div className="row">
<div className="col-md-4">
<div className="circle"><i className="icon-bookmark"></i></div>
<h2>Quick & Easy Setup</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
</div>
<div className="col-md-4">
<div className="circle"><i className="icon-keypad"></i></div>
<h2>Parallax Scrolling</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
</div>
<div className="col-md-4">
<div className="circle"><i className="icon-like"></i></div>
<h2>Responsive Design</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
</div>
</div>
</div>
</section>
</div>
<div>
<section className="social">
<div className="container">
<div className="row">
<div className="col-md-12">
<h2>Connect with us</h2>
<a className="icon-facebook"></a>
<a className="icon-twitter"></a>
<a className="icon-google"></a>
<a className="icon-instagram"></a>
<a className="icon-pinterest"></a>
</div>
</div>
</div>
</section>
</div>
<div>
<section className="get-it">
<div className="container">
<div className="row">
<div className="col-md-12">
<h1>Avaialable now on the App Store</h1>
<p className="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
<button type="button" className="app-store"></button>
</div>
<div className="col-md-12">
<hr />
<ul>
<li>Contact</li>
<li>Twitter</li>
<li>Press</li>
<li>Support</li>
<li>Developers</li>
<li>Privacy</li>
</ul>
</div>
</div>
</div>
</section>
</div>
</div>
);
}
});
module.exports = Home;

Bootplus keeping comments open

How would you go about keeping the comments in a card open by default..? As of now here's my code:
<div class="card">
<h3 class="card-heading simple">Simple News Card</h3>
<div class="card-body">
...
</div>
<div class="card-comments">
<div class="comments-collapse-toggle">
<a data-toggle="collapse" data-target="#c1-comments" href="#c1-comments">34 comments <i class="icon-angle-down"></i></a>
</div>
<div id="c1-comments" class="comments collapse">
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" data-src="holder.js/28x28" alt="avatar"/>
</a>
<div class="media-body">
<h4 class="media-heading">Comment title</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam...</p>
</div>
</div>
</div>
</div>
</div>
(copied from Bootplus)
But the comments are hidden by default and when you click on the 34 comments link, the comments toggle between open and close..
How would i keep it open by default?
DEMO (The first example)

If you can modify the HTML you can do this:
<div id="c1-comments" class="comments in collapse" style="height: auto">

Categories

Resources