title: Modify a <p> element in a list, with jQuery
body: <p>I'm coming back here because I'm not able to do what I want. I have a nav menu, with three 'li' in one 'ul', each containing a <p> element, with the nav name.
  I already have a script which hides divs and show the corresponding one, containing project thumbnails. What I would like to do, is to distinguish which nav element is active, by modifying it when it has been clicked.</p>
  
  <p>I gave a try to modify the string of the <p> element to add a dash "-" or a point • to distinguish which was the active menu but I'm not too good with jQuery yet to manipulate a "p" in a "li" in a "ul" effectively.</p>
  
  <p>Here is my html :</p>
  
  <pre><code>&lt;section id="content"&gt;
  
      &lt;p class="section_title"&gt; WORK &lt;/p&gt;
  
      &lt;div id="sections"&gt;
          &lt;ul&gt;
              &lt;li class="section" data-grid="grid1"&gt;&lt;p class="navigation"     style="cursor : pointer;"&gt; Product&lt;/p&gt;&lt;/li&gt;
              &lt;li class="section" data-grid="grid2"&gt;&lt;p class="navigation" style="cursor : pointer;"&gt; Mobility&lt;/p&gt;&lt;/li&gt;
              &lt;li class="section" data-grid="grid3"&gt;&lt;p class="navigation" style="cursor : pointer;"&gt; Arcade Sticks&lt;/p&gt;&lt;/li&gt;
              &lt;!-- &lt;li class="section" data-grid="grid4"&gt;&lt;p style="cursor : pointer;"&gt;. Infography&lt;/p&gt;&lt;/li&gt; --&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  
  
  &lt;!-- PROJECT GRID --&gt;
  
      &lt;div id="project_grid"&gt;
  
  &lt;!-- PRODUCT PROJECTS --&gt;
  
          &lt;div id="grid1" class="grid"&gt;
              &lt;a href="projects/product/jorislaarman.html" style="background:url('assets/img/thumbnails/jorislaarman.png')"&gt;&lt;/a&gt;
              &lt;a href="projects/product/ptitlouis.html" style="background:url('assets/img/thumbnails/ptitlouis.png')"&gt;&lt;/a&gt;
              &lt;a href="projects/product/diwel.html" style="background:url('assets/img/thumbnails/diwel.png')"&gt;&lt;/a&gt;
              &lt;a href="projects/product/wirquin.html" style="background:url('assets/img/thumbnails/wirquin.png')"&gt;&lt;/a&gt;
              &lt;a href="projects/product/ulna.html" style="background:url('assets/img/thumbnails/ulna.png')"&gt;&lt;/a&gt;
              &lt;a href="projects/product/envol.html" style="background:url('assets/img/thumbnails/envol.png')"&gt;&lt;/a&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>There are other grids following, each manipulated by the jQuery, here :</p>
  
  <pre><code>$("#project_grid div:not(#grid1)").hide();
  
  $('.section').click(function() {
      $('.grid').hide();
      $('#' + $(this).data('grid')).show();
  });
  </code></pre>
  
  <p>I tried several things with the jQuery there, without alterating the original script, to at least underline the clicked <p> element, such as :</p>
  
  <pre><code>$('.navigation').click(function(){
  $('p').css("text-decoration","underlined");
  });
  </code></pre>
  
  <p>and : </p>
  
  <pre><code>$('p').clicked(function(){
      $(this).css('text-decoration','underlined');
  });
  </code></pre>
  
  <p>But none of this works :/ And I can't really figure it out.</p>
  
  <p>I also tried to modify the <p> string, with .append, but I couldn't figure it out ether...</p>
  
  <p>I'd just like to do something simple. Either underline the active nav section, either add a "•" before product, mobility, or arcade stick section when they have been clicked. And of course disappear when another one is clicked.</p>
  
  <p><a href="http://jsfiddle.net/g32Vm/" rel="nofollow">http://jsfiddle.net/g32Vm/</a></p>
  
  <p>Thanks for your help !</p>