Databases
StackOverflow2013
Postsdbo
POjquery show/hide with post dom link need to add another link
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjquery show/hide with post dom link need to add another link
    text
    copied!<p>I have a list of definitions with a jquery show/hide effect and "readmore" button that changes to "close" once its open. I now need to put another button that references an anchor at the top of the screen for each description. When I tried editing the script to add the new link, the "return to top of page" button then becomes another "close" button. I am not versed enough in JS to edit this script to make it do what I need it to without some strange consequence. Any help is appreciated.</p> <pre><code>SCRIPT $(function(){ var slideHeight = 36; $('.jswrap').each(function(){ var defHeight = $(this).height(); if(defHeight &gt;= slideHeight){ $(this).css({'height':slideHeight,'max-height': defHeight}); $(this).after($('&lt;div class="jsreadmore"&gt;&lt;a href="#"&gt;Read More&lt;/a&gt;&lt;/div&gt;')); } }); $('.jsreadmore a').click(function(){ var $targetSlide = $(this).parent().prev(), curHeight = $targetSlide.height(), defHeight = $targetSlide.css('max-height'); if(curHeight == slideHeight){ $targetSlide.animate({ height: defHeight }, "normal"); $targetSlide.next().children('a').html('Close'); }else{ $targetSlide.animate({ height: slideHeight }, "normal"); $targetSlide.next().children('a').html('Read More'); } return false; }); }); </code></pre> <p>HTML</p> <pre><code>&lt;div class="jscontainer"&gt; &lt;h4&gt;&lt;a id="onedefinition"&gt;Definition Text&lt;/a&gt;&lt;/h4&gt; &lt;div class="jswrap"&gt; &lt;p&gt;content&lt;/p&gt; &lt;p&gt;morecontent&lt;/p&gt; &lt;/div&gt;&lt;/div&gt; </code></pre> <p>CSS</p> <pre><code>.content_sub1 .jscontainer {margin:0 auto;} .content_sub1 .jscontainer h2 {font-size:20px;color:#0087f1;} .content_sub1 .jswrap {position:relative; padding:10px; overflow:hidden;} .content_sub1 .jsgradient {width:100%;height:35px; position:absolute; bottom:0; left:0;} .content_sub1 .jsreadmore {padding:5px; color:#333; text-align:right;} .content_sub1 .jsreadmore a {padding-right:22px; font-weight:bold; font-size:12px; text-transform: uppercase; color:#c44; font-family:arial, sans-serif;} .content_sub1 .jsreadmore a:hover {color:#000;} </code></pre> <p>LINK</p> <p>www.doctorhtiller.com/procedures.html</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload