News for hackers. Stuff that matters.

A comment on Collapsible Blog Posts. Parent comment

Re:Collapsible Blog Posts by dbieber on Tuesday September 04, 2012 @11:50PM (#4477891)
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.
[ Parent | on HN ]
Re:Collapsible Blog Posts by volaski on Wednesday September 05, 2012 @02:33AM (#4478260)
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>

[ Parent | on HN ]
Re:Collapsible Blog Posts by learc83 on Wednesday September 05, 2012 @01:35AM (#4478147)
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.
[ Parent | on HN ]