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>