Error "Show More" button html

Question

Error "Show More" button html

Navigation

#1 by (2 votes)
#2 by (1 votes)

2

I created an area on my site where it contains a small text, and a button at the end "Show More", I put two items like this, But every time I click the "Show More" button of the second item opens the first content. What could be causing this error?

   
.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>

html css

asked by anonymous 13.01.2018 / 17:36

2 answers

1

because of the same id in the 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>

13.01.2018 / 18:36

How to request day data in SQL with Unix Time Stamp (PHP) PHP - Error when I try to login - mysqli_num_rows () expects parameter 1 to be mysqli_result

score 2 · Accepted Answer

You were using the same id for the two inputs. I have resolved this:

.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>