Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    Regular Coder
    Join Date
    Apr 2010
    Posts
    417
    Thanks
    4
    Thanked 1 Time in 1 Post

    how do i add a 'click here to see more text'

    I have seen on a few sites i.e.
    http://www.giveawayoftheday.com/

    where you can click a 'more' click that opens up the page to show more text.

    i have something like that but wish to have it like the site above does.

    my site...

    date of meeting 19 May 2010
    (more)

    clicking the (more) link would then open up to this.

    date of meeting 19 May 2010
    this meeting will be about this and that.


    i would like to have it like the site above so it is something like this...

    date of meeting 19 May 2010
    this meeting will be about this and that. please send.. (more)


    and clicking the link would then show this....

    date of meeting 19 May 2010
    this meeting will be about this and that. please send you agenda items to the secretary by the 12 May 2010 so they can be included in this meeting.



    how can i get me site like this?

  • #2
    New Coder
    Join Date
    May 2009
    Posts
    74
    Thanks
    0
    Thanked 7 Times in 7 Posts
    Your question is not clear.

    Regards.

  • #3
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    You can just link the text, image or icon to another html page or text already on the extended page. Thus:-

    <li><a href="http://www.projectseven.com/tutorials/CSS/pvii_columns/">*Equal Height CSS columns.</a></li>

    or generally -

    <li><a href="the address of the 'More' page.">Your text 0r image for the link.</a></li>



    FRANK
    Last edited by effpeetee; 05-12-2010 at 01:41 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #4
    Regular Coder
    Join Date
    Apr 2010
    Posts
    417
    Thanks
    4
    Thanked 1 Time in 1 Post
    please check the following site so see what i found.

    the site has half way down the page a MORE button link that expands the section in the page to show more information.

    this is what i am wanting to do.

    http://www.giveawayoftheday.com/

  • #5
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    If you look in the Status bar of your browser when you select the More on the left, you will see that it directs the browser to download

    http://www.giveawayoftheday.com/altdesk-191/#more-12331

    This is the line of code that is used on the page.
    <p><img src="http://www.giveawayoftheday.com/wp-content/uploads/2010/05/altdesk_boxshot.jpg" alt="" class='left' />AltDesk is a Skinnable Virtual Desktop Manager for Windows, which makes your daily work easier.<br />
    It offers you a completely new way of managing running applications on your computer, just as if you had a whole set of monitors. For example, you could launch an Office suite on one Virtual Desktop while working with your e-mail on another. Swapping tasks and switching Desktops can be easily done in the blink of an eye. <a href="http://www.giveawayoftheday.com/altdesk-191/#more-12331" class="more-link"><img src="/img/button_more.gif"
    width="55" height="24" alt="more" class="more" /></a></p>
    [/QUOTE]

    Frank
    Last edited by effpeetee; 05-12-2010 at 05:26 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #6
    New to the CF scene
    Join Date
    May 2010
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    If you're using WordPress and there are lot of plugins

    If you're using the normal html files you can hide the text with Javascript or to code two separate pages and link them!

  • #7
    Regular Coder
    Join Date
    Apr 2010
    Posts
    417
    Thanks
    4
    Thanked 1 Time in 1 Post
    this is a test of what i have so far to get this working before adding to my live site.

    what i am after is to have

    item B
    this is the start
    this is the start of itemB text... See more....


    and when see more is clicked the page shows more text like so


    item B
    this is the start
    this is the start of itemB text and this is the continued text for itemB
    Hide this content.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css"><!--
    .more { display: none; }
    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; }
    --></style>
    <script type="text/javascript"><!--
    // show/hide events for home page and other pages that need the show hide function.
    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';
          }
       }
    }
    --></script>
    </head>
    <body>
    
    <li>item B</li>
    this is the start <a href="#" id="textboxB-show" class="showLink" onclick="showHide('textboxB');return false;">See more.</a><div id="textboxB" class="more">more on item B <a href="#" id="textboxB-hide" class="hideLink" onclick="showHide('textboxB');return false;">Hide this content.</a></div>
    
    </body>
    </html>
    Last edited by jasonpc1; 05-12-2010 at 06:55 PM. Reason: PROVIDED A COMPLETELY NEW CODE, BUT STILL NOT ABLE TO GET THE TEXT TO BE ON ONE LINE

  • #8
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Is this sort of thing any use to you.

    or maybe this.

    Code:
    <!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title>Enter_Title_Here</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="author" content="">
    <meta name="generator" content="BestAddress HTML Editor Professional">
    <style type="text/css">
    CSS
    #disjointedText {
    position:relative;
    margin:2em auto;
    list-style:none;
    }
    #disjointedText dd {
    padding:0 1em;
    width:10em;
    }
    #disjointedText a {
    display: block;
    text-decoration:none;
    text-align:center;
    }
    
    #disjointedText a:hover {
    color: #cff;
    background:black;
    }
    #disjointedText a span {display: none;}
    #disjointedText a:hover span {
    display: block;
    position: absolute;
    left:300px;
    top:20px;
    color:red;
    background:#fff;
    width:15em;
    text-align:left;
    }
    #disjointedText dt {
    position:absolute;
    left:300px;
    top:20px;
    }
    </style>
    </head>
    <body>
    <h1>Disjointed rollover</h1>
    <dl id="disjointedText">
    <dt>Would you like a drink?</dt>
    <dd><a href="#n">Wine<span>Wine is good for you!</span></a></dd>
    <dd><a href="#n">Beer<span>Beer is refreshing!</span></a></dd>
    <dd><a href="#n">Whisky<span>Whisky just gets you drunk!</span></a></dd>
    </dl>
    </body>
    </html>


    Frank
    Last edited by effpeetee; 05-13-2010 at 12:06 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #9
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    836
    Thanks
    10
    Thanked 79 Times in 77 Posts
    ☠ ☠RON☠ ☠


  •  

    Posting Permissions

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