Link within a clickable div.

Link within a clickable div.

Hi guys,
I have a clickable div. Within this div is some text. I made a link at the and "- read more -" which shows extra text and hides the previous text. When this link, which is inside the div, is clicked I dont want the div to respond to the click. I used "event.stopPropagation();" for that. So far so good.

However after you clicked on the link and the extra text is shown I dont want the div to react to clicks anymore. Since this would trigger the original text to be shown.
I hope you understand my problem. Any help would be much appreciated!

  1. <script>
  2. $(".readmore").click(function(event) {
  3.     $("#originaltext").hide();
  4.     $("#header1").hide();
  5.     $("#moretext").show();
  6. })
  7.     $('.readmore').click(function(event){
  8.     event.stopPropagation();
  9. });
  10. </script>

  1.       <script>
  2. $("#services").click(function(){
  3.       $("#services").animate({
  4.     width: "350px",
  5.     height: "320px",
  6.     borderWidth: "10px",
  7.     position: "absolute",
  8.     top: "255px",
  9.     left: "50px"
  10.   }, 1500,
  11.   function() {
  12.        $("#originaltext").show();
  13.   }
  14.  
  15.   )
  16. </script>
Cheers,
Ziggy