Bu Çalışmayı Nasıl Yapabiliriz? ( Ücretli )

 <div id="wrap">
      <h1>İçerik Göster Gizle</h1>
      <p>Yazı burada adsad  adsad asdas dasd asda sdsa ds d s ad  sad sa<br>asdhgashgdh ahsdgashdgahsdhs<a href="/showhide-content-css-javascript/"><a href="#" id="example-show" class="showLink" onclick="showHide('example');return false;"><br>Devamını göster.</a></p>
      <div id="example" class="more">
         <p>Yazının devamı burada ...........<br>.........<br>.....<br></p>
         <p><a href="#" id="example-hide" class="hideLink" onclick="showHide('example');return false;">Gizle</a></p>
      </div>
   </div>

#wrap {
      font: 1.3em/1.3 Arial, Helvetica, sans-serif;
      width: 30em;
      margin: 0 auto;
      padding: 1em;
      background-color: #fff; }
   h1 {
      font-size: 200%; }

   /* This CSS is used for the Show/Hide functionality. */
   .more {
      display: none;
      border-top: 1px solid #666;
      border-bottom: 1px solid #666; }
   a.showLink, a.hideLink {
      text-decoration: none;
      color: #36f;
      padding-left: 8px;
      background: transparent url(down.gif) no-repeat left; }
   a.hideLink {
      background: transparent url(up.gif) no-repeat left; }
   a.showLink:hover, a.hideLink:hover {
      border-bottom: 1px dotted #36f; }

function showHide(shID) {
   if (document.getElementById(shID)) {
      if (document.getElementById(shID+'-show').style.display != 'none') {
         document.getElementById(shID+'-show').style.display = 'none';
         document.getElementById(shID).style.display = 'block';
      }
      else {
         document.getElementById(shID+'-show').style.display = 'inline';
         document.getElementById(shID).style.display = 'none';
      }
   }
}