Criei uma área em meu site onde contem um pequeno texto, e um botão ao final "Mostrar Mais" , coloquei dois itens assim, Mas sempre que clico no botão "Mostrar Mais" do segundo item abre o primeiro conteúdo. O que pode estar causando esse erro ?
.hide {
display:none;
}
input[type="checkbox"] {
display: none;
}
input[type="checkbox"]:checked ~ .hide {
display: block
}
input[type="checkbox"]:not(:checked) ~ .hide {
display: none;
}
<input type="checkbox" id="btn-a">
<label for= "btn-a" >
<p><i class="fa fa-arrow-circle-down"></i><strong> Mostrar Mais</strong></p>
</label>
<div class="hide">
<p>Essas informações ficam disponíveis on-line e podem ser acessadas por meio do nosso site, ou aplicativo no celular, tablete, smartphones, através de senha individual para cada condomínio.
Visando sempre, a obtenção de forma inteligente e integrada um melhor resultado em nossos serviços, realizamos sem ônus uma análise nas pastas balancetes dos últimos 12 meses. Após essa análise, apresentamos um planejamento financeiro com intuito de reduzir custos desnecessários e adequar as despesas das quais realmente o condomínio necessita.<p>
</div>
<input type="checkbox" id="btn-a">
<label for= "btn-a" >
<p><i class="fa fa-arrow-circle-down"></i><strong> Mostrar Mais</strong></p>
</label>
<div class="hide">
<p>Essas informações ficam disponíveis on-line e podem ser acessadas por meio do nosso site, ou aplicativo no celular, tablete, smartphones, através de senha individual para cada condomínio.
Visando sempre, a obtenção de forma inteligente e integrada um melhor resultado em nossos serviços, realizamos sem ônus uma análise nas pastas balancetes dos últimos 12 meses. Após essa análise, apresentamos um planejamento financeiro com intuito de reduzir custos desnecessários e adequar as despesas das quais realmente o condomínio necessita.</p>
</div>