Hide content except the one that is checked

Navigation
2

I have the following HTML code: 

<div id="contenedor">
	<input id="tab1" type="radio" name="opcion" checked="checked" />
	<label for="tab1">Tab1</label>
	<input id="tab2" type="radio" name="opcion" />
	<label for="tab2">Tab2</label>
	<input id="tab3" type="radio" name="opcion" />
	<label for="tab3">Tab3</label>
	<div id="contenido">
		<div id="contenido1">
			<p class="left"><img src="imagenes/una.jpg" alt="">Contenido 1 primer párrafo</p>
		<p class="left last"><img src="imagenes/dos.jpg" alt="">Contenido 1 segundo párrafo</p>
	</div>
		<div id="contenido2">
			<p>Contenido 2 primer párrafo</p>
		<p>Contenido 2 segundo párrafo</p>
	</div>
	<div id="contenido3">
			<p>Contenido 3</p>
	    		<ul>
	        		<li>Lorem ipsum</li>
	        		<li>Lorem ipsum</li>
	        		<li>Lorem ipsum</li>
	        	</ul>
	        	<p>Lorem ipsum</p>
	</div>
</div>
  </div>

And I need to hide all the div with id "content (number)", and visualize the content of which is checked.

First I get it with: 

#contenido {
	display: none;
}

But to show the check I can not determine the form.

This does not work. 

#contenedor input: checked #contenido {
	display: block;
}

You can not use JavaScript, or edit the HTML. Which makes it difficult for me to find a solution, logically.

Greetings and thanks.

    
asked by A.J. 26.04.2017 в 19:26
source

4 answers

4

You can get it using only CSS, without the need for JavaScript or changes to your HTML. The idea would be the following:

  • All div within #contenido are hidden by default (with display:none )
  • When a checkbox is selected, the associated div is displayed (with display:block ).

The important thing is to find the selector that works for the case you want. Fortunately, by the way your HTML is structured, you can use the "brother" operator ~ that will be useful to you: 

/* todos los div de #contenido no se ven por defecto*/
#contenido > div {
  display:none;
}


/* reglas para los diferentes checkboxes y su div asociado */
#tab1:checked ~ #contenido #contenido1 {
  display:block;
}

#tab2:checked ~ #contenido #contenido2 {
  display:block;
}

#tab3:checked ~ #contenido #contenido3 {
  display:block;
}
<div id="contenedor">
  <input id="tab1" type="radio" name="opcion" checked="checked" />
  <label for="tab1">Tab1</label>
  <input id="tab2" type="radio" name="opcion" />
  <label for="tab2">Tab2</label>
  <input id="tab3" type="radio" name="opcion" />
  <label for="tab3">Tab3</label>
  <div id="contenido">
    <div id="contenido1">
      <p class="left"><img src="imagenes/una.jpg" alt="">Contenido 1 primer párrafo</p>
      <p class="left last"><img src="imagenes/dos.jpg" alt="">Contenido 1 segundo párrafo</p>
    </div>
    <div id="contenido2">
      <p>Contenido 2 primer párrafo</p>
      <p>Contenido 2 segundo párrafo</p>
    </div>
    <div id="contenido3">
      <p>Contenido 3</p>
      <ul>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
      </ul>
      <p>Lorem ipsum</p>
    </div>
  </div>
</div>
    
answered by 26.04.2017 / 20:07
source
0

It occurs to me using javascript with the hide and show methods.

Here is an example of how to do it.

jsfiddle

    
answered by 26.04.2017 в 19:48
0

It occurs to me to solve it in the following way: 

/*
$("#contenedor .tab").css("display","none");
$("#contenedor #contenido1").css("display","block");

$("#contenedor input[type=radio]").click(function(){
  var id = $(this).attr('data-id');
  console.log("Click en" + id);
  //Oculto todos, para eso agrege la clase tab
  $("#contenedor .tab").css("display","none");
  //Muestro al que se le dio click, para esto le puse el atributo data-id a cada radio
  $("#contenedor #contenido"+id).css("display","block");
});
*/
#contenido div{
  display: none;
}

#contenedor input[type=radio]:checked{
    height: 20px;
    width: 20px;
}
<div id="contenedor">
	<input id="tab1" data-id="1" type="radio" name="opcion" checked="checked" />
	<label for="tab1">Tab1</label>
	<input id="tab2"  data-id="2" type="radio" name="opcion" />
	<label for="tab2">Tab2</label>
	<input id="tab3"  data-id="3" type="radio" name="opcion" />
	<label for="tab3">Tab3</label>
	<div id="contenido">
		<div id="contenido1" class="tab active">
			<p class="left"><img src="imagenes/una.jpg" alt="">Contenido 1 primer párrafo</p>
		<p class="left last"><img src="imagenes/dos.jpg" alt="">Contenido 1 segundo párrafo</p>
	</div>
		<div id="contenido2" class="tab">
			<p>Contenido 2 primer párrafo</p>
		<p>Contenido 2 segundo párrafo</p>
	</div>
	<div id="contenido3" class="tab">
			<p>Contenido 3</p>
	    		<ul>
	        		<li>Lorem ipsum</li>
	        		<li>Lorem ipsum</li>
	        		<li>Lorem ipsum</li>
	        	</ul>
	        	<p>Lorem ipsum</p>
	</div>
</div>
  </div>

I hope you find it useful, Regards.

.... With CSS pur .... I doubt very much that it is possible ...: -S I can not think of anything

    
answered by 26.04.2017 в 19:50
0

I think I'm not wrong in saying that only with CSS you can not modify properties of other elements than the selected one. You are trying to change the display property of a "Brother" element with a specific id, by selecting a radio type input. If you can modify the html maybe it can be achieved with the pseudoSelectors: cheked and + Greetings

    
answered by 27.04.2017 в 00:49
Return a variable that is within an ajax [duplicated] join two arrangements based on a property