2

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>

2 Respostas 2

2

Você estava usando o mesmo id para os dois inputs. Resolvi dessa forma:

.hide {
  display:none;
}
input[type="checkbox"] {
  display: none;
}
#btn-a:checked ~ .hide {
  display: block
}
#btn-a:not(:checked) ~ .hide {
  display: none;
}
#btn-b:checked ~ .hide {
  display: block
}
  #btn-b: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 A</strong></p>
  </label>

  <div class="hide">
    <p>Essas informações são de A.<p>
  </div>

  <input type="checkbox" id="btn-b">

  <label for= "btn-b" >
    <p><i class="fa fa-arrow-circle-down"></i><strong> Mostrar Mais B</strong></p>
  </label>

  <div class="hide">
    <p>Essas informações são de B.</p>
  </div>

1

por causa do mesmo id no input

.myCollapse label {
    display: inline-flex;
}
.myCollapse label p strong {
    display: block;
}
.myCollapse label p strong+strong, .hide {
    display:none;
}
.myCollapse input[type="checkbox"]:checked ~ label p strong {
    display:none;
}
.myCollapse input[type="checkbox"]:checked ~ label p strong+strong{
    display:inline;
}
.myCollapse input[type="checkbox"]:checked ~ .hide {
    display:table;
}
<div class="myCollapse">
	
	<input type="checkbox" id="btn-a"/>
	<label for= "btn-a" >
		<p>
			<i class="fa fa-arrow-circle-down"></i>
			<strong> Mostrar Mais</strong>
			<strong> Mostrar Menos</strong>
		</p>
	</label>
                                   
    <div class="hide" id="hide1">
       <p>collapse 1<p>
    </div>
	
</div>

<div class="myCollapse">
	
	<input type="checkbox" id="btn-aa"/>
	<label for= "btn-aa" >
		<p>
			<i class="fa fa-arrow-circle-down"></i>
			<strong> Mostrar Mais</strong>
			<strong> Mostrar Menos</strong>
		</p>
	</label>
                                   
	
    <div class="hide" id="hide1">
       <p>collapse 2<p>
    </div>
	
</div>

Você deve fazer log-in para responder a esta pergunta.