One thing I was going for is being able to type the post quickly without having to think much about HTML. <p id="x"> and <p id="_x"> is really the shortest I could get it. Maybe you could spell out your two div idea in a bit more detail for me- I don't know exactly what you have in mind.

There are many ways, but you could also do something like this:

<script> $(document).on("click", "p", function(event){ if($(this).hasClass("expanded"){ $(this).removeClass("expanded").addClass("collapsed"); } else{ $(this).removeClass("collapsed").addClass("expanded"); } }); </script>

<style> p.collapsed > div.big{ display:none; } p.collapsed > div.small{ display:block; }

  p.expanded > div.big{
    display:block;
  }
  p.expanded > div.small{
    display:none;
  }

</style>

<p class = 'expanded'> <div class = "big">click to collapse this</div> <div class = "small">click to expand this</div> </p> <p class = 'collapsed'> <div class = "big">click to collapse me</div> <div class = "small">click to expand me</div> </p>

I'm pretty sure he's thinking of something like this:

    <p>
      <div class="active">Short Form</div>
      <div class="inactive">Long Form</div>
    </p>

,where clicking switches the classes.