www.webdeveloper.com
Page 1 of 6 123 ... LastLast
Results 1 to 15 of 90

Thread: Expand/Collapse Paragraph

  1. #1
    Join Date
    Sep 2003
    Location
    Utah
    Posts
    396

    Expand/Collapse Paragraph

    I have a table that shows results from a database. One of the fields is a memo field that can be quite long. So, I am using some javascript to display just the first 50 or so characters. What I would like to do now is add a link at the end that the user can click to display the full field and then when the full field is displayed have another link that they can click to collapse it down again. I have seen this done quite a few times, but don't know how to do the collapse/expand part. Any thoughts?

  2. #2
    Join Date
    Jan 2005
    Location
    Los Angeles, CA
    Posts
    4,887
    A snippet:
    Code:
    <script type="text/javascript">
    function toggleMe(a){
    var e=document.getElementById(a);
    if(!e)return true;
    if(e.style.display=="none"){
    e.style.display="block"
    }
    else{
    e.style.display="none"
    }
    return true;
    }
    </script>
    
    <input type="button" onclick="return toggleMe('para1')" value="Toggle"><br>
    <p id="para1">
    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
    </p>
    <br>
    <input type="button" onclick="return toggleMe('para2')" value="Toggle"><br>
    <div id="para2">
    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
    </div>
    <br>
    <input type="button" onclick="return toggleMe('para3')" value="Toggle"><br>
    <span id="para3">
    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
    </span>

  3. #3
    Join Date
    Jan 2006
    Posts
    2
    Very handy script, thank you. I have the following related question. As written, the blah blah blah texts are displayed in full by default. Any suggestion how to reverse the default so that just an introductory line of text is displayed followed by (or preceded by) the button? For example:

    [Toggle button] Click TOGGLE to expand/collapse submission instructions...

    [Toggle button] Click TOGGLE to expand/collapse driving instructions...

    [Toggle button] Click TOGGLE to expand/collapse FAQ...

    TIA for any assistance,
    Bob

  4. #4
    Join Date
    Apr 2003
    Location
    UK
    Posts
    2,203
    Change the P tags to Div tags, add style="display:none", wrap all but the first line within the div tags


    First line First line First line First line First line First line First line First line First line
    <div id="para1" style="display:none">
    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
    </div>
    <br>
    <input type="button" onclick="return toggleMe('para1')" value="Toggle">
    <br>
    The Silent One

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is one with an idea

  5. #5
    Join Date
    Jan 2006
    Posts
    2
    Excellent! Thank you, that's perfect.

    Why anyone would know such things always fascinates me but that's stuff for an entirely different thread.

    Wishing you and All a very happy New Year!
    Bob

  6. #6
    Join Date
    Jan 2006
    Posts
    1

    collapsible text - nice touch, but illegal...

    ...if you forget to use a different ID for any element in a single page: you can't use the same ID for several elements.
    Great one!
    Last edited by Mitch074; 01-13-2006 at 07:34 AM.

  7. #7
    Join Date
    Jun 2005
    Location
    Oahu, Hawaii
    Posts
    76
    I was debating on what to search, this or Google, i used Google and still ended up here, just what I wanted but without the buttons, works great.

    I have a question, can this be done without javascript?

  8. #8
    Join Date
    Jan 2005
    Location
    Los Angeles, CA
    Posts
    4,887
    I've been getting too many PMs concerning http://javascript.internet.com/misce...paragraph.html
    which has a link to this thread. Perhaps others will encounter this thread after they decide to check out the Contributor URL.

    Once and for all, you can have as many buttons as you wish on the page. You can put the buttons anywhere on the page you wish -- it doesn't have to be right-next-to the paragraph it will toggle. The button "knows" which paragraph to target via the ONCLICK event handler. ONCLICK="return toggleMe('para1')" would target the paragraph with the ID="para1"
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    	"http://www.w3.org/TR/html4/strict.dtd">
    <html dir="ltr" lang="en">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta http-equiv="content-style-type" content="text/css">
    <meta http-equiv="content-script-type" content="text/javascript">
    <title></title>
    <style type="text/css">
    input.button {
      color: #fff; background: #0034D0;
      font-size: .8em;
      font-weight:bold;
      font-family: Verdana, Arial, Helvetica, sans-serif;
      border: solid 1px #ffcf31;
    }
    </style>
    <script type="text/javascript">
    function toggleMe(a){
      var e=document.getElementById(a);
      if(!e)return true;
      if(e.style.display=="none"){
        e.style.display="block"
      } else {
        e.style.display="none"
      }
      return true;
    }
    </script>
    </head>
    <body>
    
    <div>
    <input type="button" class="button" onclick="return toggleMe('para1')" value="Are the JavaScripts here free?">
    </div>
    <div id="para1" style="display:none">
    Yes, all the scripts on this site are free for personal or business use. The only requirement for using them is that you leave the credit information inside the script.
    </div>
    <div>
    <input type="button" class="button" onclick="return toggleMe('para1')" value="Are the JavaScripts here free?">
    </div>
    
    <div><br></div>
    
    <div>
    <input type="button" class="button" onclick="return toggleMe('para2')" value="What is JavaScript? Is it the same as Java?">
    </div>
    <div id="para2" style="display:none">
    JavaScript is NOT Java. JavaScript is a basic scripting language that allows Web authors to create dynamic pages that react to user interaction.
    </div>
    <div>
    <input type="button" class="button" onclick="return toggleMe('para2')" value="What is JavaScript? Is it the same as Java?">
    </div>
    
    </body>
    </html>

  9. #9
    Join Date
    Apr 2006
    Posts
    1
    I am trying to do the same thing as above only with a slide in/out tab. When the page loads the tab with information is showing, when the user clicks on the lower corner to close the tab it slides up so that only a small corner is showing. When they click on the tab again, the entire tab is visible again. This is what I currently have:

    <script type="text/javascript">
    function toggleMe(a){
    var e=document.getElementById(a);
    if(!e)return true;
    if(e.style.margin=='-120px 0px 0px 0px'){
    e.style.margin='0px 0px 0px 0px'}
    else{
    e.style.margin='-120px 0px 0px 0px'
    }
    return true;
    }
    </script>
    <body style="margin-top: 0px; margin-left: 0px;">
    <table border="0" cellpadding="0" cellspacing="0" id="popup" style="margin: 0px 0px 0px 0px;">
    <tr>
    <td id="Td1" style="background: url('popup.gif') no-repeat top left; height: 120px; width: 264px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px;">Volume discounts available when ordering Karyotype and SingatureChip&reg; microarra combination.<br /><a href="">Please click here for more details</a></td>
    </tr>
    <tr>
    <td><table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
    <td></td>
    <td align="right" onclick="return toggleMe('popup');"><img alt="" border="0" height="20" hspace="0" src="tab.gif" width="50" vspace="0" /></td>
    </tr>
    </table></td>
    </tr>
    </table>

  10. #10
    Join Date
    Jan 2005
    Location
    Los Angeles, CA
    Posts
    4,887
    Something like this?
    Code:
    <script type="text/javascript">
    function toggleMe(a){
    var e=document.getElementById(a);
    if(!e)return true;
    if(e.style.margin=='-120px 0px 0px 0px'){
    e.style.margin='0px 0px 0px 0px'}
    else{
    e.style.margin='-120px 0px 0px 0px'
    }
    return true;
    }
    </script>
    <body style="margin-top: 0px; margin-left: 0px;">
    <div style="width:500px;height:200px; background-color:blue;color:red;">line 1<br />line 2<br />line 3<br />line 4<br /></div>
    <div id="Td1" style="background: url('popup.gif') no-repeat top left; height: 120px; width: 264px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px;">
    Volume discounts available when ordering Karyotype and SingatureChip&reg; microarra combination.<br /><a href="">Please click here for more details</a>
    </div>
    <div><img alt="" onclick="return toggleMe('Td1');" border="0" height="20" hspace="0" src="tab.gif" width="50" vspace="0" /></div>

  11. #11
    Join Date
    May 2006
    Posts
    5
    Hi. New to this forum. Have an issue and rather than start a new thread thought I would post it here as it seems most relevant.

    I have a FAQ page which has about 50 questions. I thought I would use a expand/collapse script as it's the most easiest to view. Each question is a link to the answer (rather than a button or graphic). All works well except uthe user is returned to the top of the page when the question expands. You don't notice it on the first set questions but it is annoying for the questions that are further down the page.

    I am using the following code for the questions:
    <div class="navBar"><a href="#" onclick="reveal('S01')">
    What is the question?
    </a></div>
    <div class="S01" id="S01" style="display: none;">
    This is the answer
    </div>

    When I use the above code with a button or graphic, it works fine. Just when using <a href='#'> it seems to only want to return to the top of the page (although it does open question). Any ideas?

  12. #12
    Join Date
    Apr 2003
    Location
    UK
    Posts
    2,203
    Add return false to your link

    <a href="#" onclick="reveal('S01') ; return false">What is the question?</a>


    or you could go with a div and style it with css

    <style type="text/css">
    .question{
    text-decoration:underline;
    color:#00F;
    }
    </style>


    <div class="question" onclick="reveal('S01')">
    What is the question?
    </div>
    The Silent One

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is one with an idea

  13. #13
    Join Date
    May 2006
    Posts
    5
    Thanks for reply. That kinda worked in that the answer appears on screen and it doesn't make you return to the top. However, the only problem is that the answer appears befor the question once revealed. Any suggestions?

    eg.
    A. This is the answer
    Q. What is the question?

    A. This answer is 10
    Q. What is 5 + 5?

  14. #14
    Join Date
    Apr 2003
    Location
    UK
    Posts
    2,203
    Post the code you are using
    The Silent One

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is one with an idea

  15. #15
    Join Date
    May 2006
    Posts
    5
    Quote Originally Posted by Mr J
    Post the code you are using
    <script type="text/javascript">
    function reveal(a){
    var e=document.getElementById(a);
    if(!e)return true;
    if(e.style.display=="none"){
    e.style.display="block"
    } else {
    e.style.display="none"
    }
    return true;
    }
    </script>

    In the body:

    <a href="#" onclick="reveal('S81'); return false">
    What is 5 + 5?
    </a>
    <div id="S81"; style="display:none">
    <p>
    10
    </p>
    </div>
    Last edited by dvs; 05-11-2006 at 07:59 AM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles