title: How do I toggle multiple divs individually?
body: <p>I've tried searching the site and I found a bunch of responses that have to deal with toggling divs on this site. I've also read the documentation on the jquery site. However all of my programming experience has been with mostly back-end java services and I am not a front-end web dev at all so when I see all of the explanations that are given to the answers, I really don't <strong>understand</strong> them. I've gotten things to work on one individual div but I want things to work on a page that will have hundred of divs that I want to be able to toggle individually.</p>
  
  <p>Can somebody help me not just get the answer but to really understand what is going on?</p>
  
  <p>I have a page with story that has two languages. One language is hidden by default and the other language is displayed. I want to be able to click on an individual div and just have that specific div toggle the languages. I'm using 4 divs in my example, but I want this to work on a page that will have hundreds of divs on it.</p>
  
  <p>I've tried a few different things.</p>
  
  <ul>
  <li>Do I need to assign a class or id to the outside divs that I have wrapping things? Why?</li>
  <li>How to get my action to apply to every div on the page without having to use write an onclick() attribute to each div and passing in individual id's? </li>
  </ul>
  
  <p><strong>HTML</strong> </p>
  
  <pre><code>&lt;div&gt;
      &lt;div id="l12" class="l1"&gt;
          CHAPTER I Down the Rabbit-Hole
      &lt;/div&gt;
      &lt;div id="l22" class="l2" toggeled="true"&gt;
          Capítulo I Descendo a Toca do Coelho
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div&gt;
      &lt;div id="l13" class="l1"&gt;
          &lt;p&gt;
              Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, 'and what is the use of a book,' thought Alice 'without pictures or conversation?'
          &lt;/p&gt;
      &lt;/div&gt;
      &lt;div id="l23" class="l2" toggeled="true"&gt;
          &lt;p&gt;
              Alice estava começando a ficar muito cansada de sentar-se ao lado de sua irmã no banco e de não ter nada para fazer: uma ou duas vezes havia espiado o livro que a irmã estava lendo, mas não havia imagens nem diálogos nele, "e para que serve um livro", pensou Alice, "sem imagens nem diálogos?"
          &lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>The Rest</strong></p>
  
  <pre><code>&lt;head&gt;
  &lt;meta charset="utf-8"/&gt;
  &lt;style&gt;
      .l2{display: none;}
  &lt;/style&gt;
  &lt;script src="//code.jquery.com/jquery-1.10.2.js"&gt;
  &lt;script&gt;
      $( ".toggeled" ).click(function() {
      $( ".l10" ).toggle();
      });
  &lt;/script&gt;
  &lt;/head&gt;
  </code></pre>