Results 1 to 3 of 3

Thread: Show more / less with javascript

  1. #1
    Join Date
    Oct 2012
    Posts
    155
    Thanks
    21
    Thanked 1 Time in 1 Post

    Default Show more / less with javascript

    I need something different from what I was able to find online:


    Code:
    <script type="text/javascript" language="JavaScript"><!--
    function HideContent(d) {
    document.getElementById(d).style.display = "none";
    }
    function ShowContent(d) {
    document.getElementById(d).style.display = "list-item";
    }
    function ReverseDisplay(d) {
    if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; }
    else { document.getElementById(d).style.display = "none"; }
    }
    //--></script>More<br/>
    <a href="javascript:ShowContent('uniquename')" backgorund="orange">
    Click to show.
    </a>
    <div id="uniquename" style="display:none;">
    <p>"your content goes here"</p>
    <a href="javascript:HideContent('uniquename')">
    hide
    </a>
    </div>

    With the code above you have to put some text before it and then the rest goes into "your content goes here" and then visitors can then view more or less.

    I need a code that will allow me to put the entire content into it and then it will only show a small preview of it (maybe height: 500px) and the rest will show only if you click on "show more / less".

    Any ideas?

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,800
    Thanks
    2
    Thanked 421 Times in 415 Posts

    Default

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
    .scroller {
        position: absolute;
        top: 50px;
        right: 20px;
        height: 100px;
        width: 220px;
        border: solid brown 2px;
        background-color: yellow;
        overflow:hidden;
    }
    .scroll {
        position: absolute;
        top: 0px; left: 10px;
        width: 200px;
        font-size: medium;
        color: black;
    }
    span.mytitle {
        font-size: large;
        font-weight: bold;
        color: blue;
    }
    
    .button {
        position:relative;top:5px;left:50px;width:140px;background-Color:#FFCC66;text-Align:center;border:solid red 1px;cursor:pointer;margin-Top:2px;
    
    }
    
    
    </style>
    </head>
    <body>
    <div id="scroller" class="scroller">
        <div class="scroll">
            <div id="cng" class="button" onmouseup="zxcScroller.MoreLess('scroller')">toggle</div>
            <div class="button" onmouseup="zxcScroller.MoreLess('scroller',true)">open</div>
            <div  class="button"onmouseup="zxcScroller.MoreLess('scroller',false)">close</div>
           <span style="font-size: x-large; color: red;">more</span><br/>
            This is where you put the text you want to have scroll.<br/><br/>
            <span class="mytitle">This is a title</span><br/>
            And this is some content.<br/>
            And this is some content.<br/>
            And this is some content.<br/>
            And this is some content.<br/>
            <hr/>
            <span class="mytitle">Another title</span>
            <ul>
                <li>And this is a list</li>
                <li>Of items</li>
                <li>Just demonstrating</li>
                <li>More content types</li>
            </ul>
            <hr/>
            <span class="mytitle">Announcement</span><br/>
            When in the course of human events it
            becomes necessary for one people to dissolve the political bands which have connected
            them with another and to assume among the powers of the earth, the separate and equal
            station to which the Laws of Nature and of Nature's God entitle them, a decent respect
            to the opinions of mankind requires that they should declare the causes which impel
            them to the separation.
            <br/><br/>
        </div>
    </div>
    
    
    
    <script type="text/javascript">
    
    var zxcScroller ={
    
     MoreLess:function(id,ud){
      var o=this['zxc'+id],t,ms;
      if (o){
       ud=o.ud=ud===true||ud==false?ud:!o.ud;
       t=o.a[ud===true?3:2]
       ms=o.ms*Math.abs((t-o.a[4])/(o.a[2]-o.a[3]));
       o.cng?o.cng(o.ud):null;
       this.animate(o,o.a,o.a[4],t,new Date(),ms,ud?'s':'c',Math.PI/(2*ms));
      }
     },
    
     init:function(o){
      var id=o.ScrollerID,ms=o.Animate,p=document.getElementById(id),s=p?p.getElementsByTagName('DIV')[0]:null,cng=o.OnChange;
      if (s){
       var ph=p.offsetHeight,sh=s.offsetHeight;
       o.a=[p,'height',ph,sh,ph]
       o.ms=typeof(ms)=='number'&&ms>0?ms:sh*2;
       o.ud=false;
       o.cng=typeof(cng)=='function'?cng:null;
       this['zxc'+id]=o;
      }
     },
    
     animate:function(o,a,f,t,srt,mS,s,i){
      clearTimeout(a[5]);
      var oop=this,ms=new Date()-srt,n=s=='s'?(t-f)*Math.sin(i*ms)+f:s=='c'?t-(t-f)*Math.cos(i*ms):(t-f)/mS*ms+f;
      if (isFinite(n)){
       a[4]=Math.max(f<0||t<0?0:n,n);
       a[0].style[a[1]]=a[4]+'px';
      }
      if (ms<mS){
       a[5]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS,s,i); },10);
      }
      else {
       a[4]=t;
       a[0].style[a[1]]=t+'px';
      }
     }
    
    
    
    }
    
    zxcScroller.init({
     ScrollerID:'scroller', // the unique ID name of the parent DIV.           (string)
     Animate:2000,           //(optional) the scroll duration in milli seconds. (default = scroll height * 2)
     OnChange:function(ud){
      document.getElementById('cng').innerHTML='toggle - '+(ud?'close':'open');
     }
    })
    
    
    
    
    </script>
    </body>
    </html>
    Last edited by vwphillips; 07-07-2013 at 02:11 PM. Reason: added OnChange function
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. The Following User Says Thank You to vwphillips For This Useful Post:

    qwikad.com (07-07-2013)

  4. #3
    Join Date
    Oct 2012
    Posts
    155
    Thanks
    21
    Thanked 1 Time in 1 Post

    Default

    Great! I like it.

Similar Threads

  1. Replies: 2
    Last Post: 01-03-2012, 10:38 AM
  2. Javascript Header Show/Hide
    By RoRiddler in forum JavaScript
    Replies: 2
    Last Post: 12-08-2011, 05:44 PM
  3. Replies: 1
    Last Post: 04-23-2010, 11:26 AM
  4. Show Div. Simple javascript question.
    By shapper in forum JavaScript
    Replies: 1
    Last Post: 03-19-2006, 08:39 AM
  5. Always show scrollbars with JavaScript?
    By Artimidor in forum JavaScript
    Replies: 6
    Last Post: 09-28-2005, 06:23 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •