title: CSS two clickable elements show different content
body: <p>I need help with a little css.  </p>
  
  <p>I have two clickable text areas (like in the code pen below). If i click the first one the first text and img need to be shown and if i click the second textfield the second text and img need to be show.</p>
  
  <p>I didn't get it. I´m too stupid. </p>
  
  <p>I prefer css only. If there is no other way JS is also possible.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.test{
    float:left;
    background-color: gray; /*only when active*/
    margin: 5px;
    padding:5px;
  }
  .text1{
  display:block;
    background-color:gray;
  }
  .text2{
    display: none;
        background-color:gray;
  
  }
  .img1 img{
  max-width: 600px;}
  .img2 img{
  max-width: 600px;
  display: none}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;div class="img1"&gt;&lt;img src="https://smartphone-klinik.net/wp-content/uploads/2018/03/K1600_pexels-photo-572688.jpg"&gt;&lt;/div&gt;
  &lt;div class="img2"&gt;&lt;img src="https://smartphone-klinik.net/wp-content/uploads/2018/03/pexels-photo-534736.jpeg"&gt;&lt;/div&gt;
  
  &lt;div class="col-xs-12 col-md-6"&gt;
      &lt;p class="test"&gt;Click Area 1&lt;/p&gt;
      &lt;p class="test"&gt;Click Area 2&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="container"&gt;
    &lt;p class="text1"&gt;Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.  &lt;/p&gt; 
  &lt;p class="text2"&gt;Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.   
  &lt;/p&gt;
    
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>