title: Toggle and re-toggle several <div>-blocks
body: <p>I have a website with several blocks, each of them containing six  with different statements like this:</p>
  
  <p>Block A</p>
  
  <ul>
  <li>A-1</li>
  <li>A-2</li>
  <li>A-3</li>
  <li>A-4</li>
  <li>A-5</li>
  <li>A-6</li>
  </ul>
  
  <p>Block B</p>
  
  <ul>
  <li>B-1</li>
  <li>B-2</li>
  <li>...</li>
  </ul>
  
  <p>In every block the user decides to click on one item (e. g. A-3), this item (e. g. A-3) will stay and the five other items will disappear (via .toggle()).</p>
  
  <p>If you click on the selected item (e. g. A-3), all items of a block will become visible again and the user can make his or her choice again.</p>
  
  <p>After every block is reduced to one item (e. g. A-3, B-2, C-4, D-6 ...), I want to get the content of the selected items to collect them into a textarea, a variable or something else.</p>
  
  <p>My actual code looks like this:</p>
  
  <pre><code>    "use strict";
  
  $(document).ready(function () {
  
    sizeContent();
  
    $(window).resize(sizeContent);
  
    function sizeContent() {
      var newHeight = ($("html").height() - $(".pageheader").height() - $(".pagefooter").height()) + "px";
      $(".wrap").css("min-height", newHeight);
   }
  
  
  
    $( "div#a.a" ).click( function () {
      $( "div#b.a, div#c.a, div#d.a, div#e.a, div#f.a, h4.headline_a " ).toggle("slow");
    });
  
    $( "div#b.a" ).click( function () {
      $( "div#a.a, div#c.a, div#d.a, div#e.a, div#f.a, h4.headline_a " ).toggle("slow");
    });
  
    $( "div#c.a" ).click( function () {
      $( "div#b.a, div#a.a, div#d.a, div#e.a, div#f.a, h4.headline_a " ).toggle("slow");
    });
  
    $( "div#d.a" ).click( function () {
      $( "div#b.a, div#c.a, div#a.a, div#e.a, div#f.a, h4.headline_a " ).toggle("slow");
    });
  
    $( "div#e.a" ).click( function () {
      $( "div#b.a, div#c.a, div#d.a, div#a.a, div#f.a, h4.headline_a " ).toggle("slow");
    });
  
    $( "div#f.a" ).click( function () {
      $( "div#b.a, div#c.a, div#d.a, div#e.a, div#a.a, h4.headline_a " ).toggle("slow");
    });
  
  
  
    $( "div.bemerkung_done" ).click(function () {
        var print = $( "div.div_a" ).text();
        $( "div.bemerkung_done" ).after( print );
    });
  
  
  });
  </code></pre>
  
  <p>My question is: How can I get the one item that is visible after toggling the rest? I've already tried to change the id with the onclick-function, but then nothing happens because I think, it simply doesn't correspond to the changed id. How can I solve this problem?</p>
  
  <p>I'm looking forward to any suggestion and appreciate your help!</p>
  
  <p>EDIT: My html-code</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Testseite&lt;/title&gt;
  
      &lt;meta name="description" content=""&gt;
  
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no"&gt;
  
      &lt;link href="css/normalize.css" rel="stylesheet" media="all"&gt;
      &lt;link href="css/styles.css" rel="stylesheet" media="all"&gt;
  
      &lt;link rel="icon" type="image/png" href="Grafiken/favicon-32x32.png" sizes="32x32"&gt;
      &lt;link rel="icon" type="image/png" href="Grafiken/favicon-16x16.png" sizes="16x16"&gt;
  
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/jQuery.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body class="bemerkung" id="bemerkung"&gt;
  
  &lt;header role="banner" class="pageheader" &gt;
  
      &lt;div class="inside"&gt;
          &lt;a href="index.php" title="home" id="logo"&gt;
              &lt;img src="Grafiken/logo.png" alt="home"&gt;
          &lt;/a&gt;
      &lt;/div&gt; &lt;!-- inside --&gt;
  
  &lt;/header&gt;
  
  &lt;div class="wrap"&gt;
      &lt;main class="main"&gt;
  
          &lt;div class="headline"&gt;
              &lt;h3&gt;Ueberschrift&lt;/h3&gt;
          &lt;/div&gt;
  
          &lt;div class="div_a"&gt;
              &lt;h4 class="headline_a"&gt;Block A&lt;/h4&gt;
              &lt;div class="a" id="a"&gt;
                  &lt;p&gt;A-1&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="a" id="b"&gt;
                  &lt;p&gt;A-2&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="a" id="c"&gt;
                  &lt;p&gt;A-3&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="a" id="d"&gt;
                  &lt;p&gt;A-4&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="a" id="e"&gt;
                  &lt;p&gt;A-5&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="a" id="f"&gt;
                  &lt;p&gt;A-6&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="bemerkung_done"&gt;
              &lt;p class="bemerkung_generieren"&gt;&gt;&gt; Bemerkung generieren&lt;/p&gt;
          &lt;/div&gt;
  
  
      &lt;/main&gt;
  &lt;/div&gt;
  
  &lt;footer role="contentinfo" class="pagefooter"&gt;
      &lt;div class="inside"&gt;
          &lt;p&gt;Footer&lt;/p&gt;
      &lt;/div&gt;
  &lt;/footer&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>