www.webdeveloper.com
Page 3 of 6 FirstFirst 12345 ... LastLast
Results 31 to 45 of 90

Thread: Expand/Collapse Paragraph

  1. #31
    Join Date
    Jun 2006
    Posts
    2
    I am trying to use 1 button to expand and collapse multiple <div> tags.
    Currently I'm able to expand and collapse just 1.
    If I have multiple <div> tags with same ID, it does not work.
    Any suggestions?

    <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('text1')" value="Details"><br>

    <div id="text1" style="display:none">
    first blah first blah first blah first blah first blah first blah first blah first blah first blah first blah
    first blah first blah first blah first blah first blah first blah first blah first blah first blah first blah
    first blah first blah first blah first blah first blah first blah first blah first blah first blah first blah
    first blah first blah first blah first blah first blah first blah first blah first blah first blah first blah
    first blah first blah first blah first blah first blah first blah first blah first blah first blah first blah
    </div>
    <p>Some more text and tags in between the first blah and second blah</p>
    <div id="text1" style="display:none">
    second blah second blah second blah second blah second blah second blah second blah
    second blah second blah second blah second blah second blah second blah second blah
    second blah second blah second blah second blah second blah second blah second blah
    second blah second blah second blah second blah second blah second blah second blah
    second blah second blah second blah second blah second blah second blah second blah
    </div>

  2. #32
    Join Date
    Jun 2006
    Posts
    2

    Figured out just one way, anyone know of a shorter way?

    <script type="text/javascript">
    function toggleMe(a,b){
    var e=document.getElementById(a);
    if(!e)return true;
    if(e.style.display=="none"){
    e.style.display="block"
    }
    else{
    e.style.display="none"
    }
    var f=document.getElementById(b);
    if(!f)return true;
    if(f.style.display=="none"){
    f.style.display="block"
    }
    else{
    f.style.display="none"
    }
    }
    </script>

    <input type="button" onclick="return toggleMe('first1','second1')" value="Details"><br>

    <div id="first1" style="display:none">
    first blah first blah first blah first blah first blah first blah first blah first blah first blah first blah
    first blah first blah first blah first blah first blah first blah first blah first blah first blah first blah
    first blah first blah first blah first blah first blah first blah first blah first blah first blah first blah
    first blah first blah first blah first blah first blah first blah first blah first blah first blah first blah
    first blah first blah first blah first blah first blah first blah first blah first blah first blah first blah
    </div>
    <p>Some more text and tags in between the first blah and second blah</p>
    <div id="second1" style="display:none">
    second blah second blah second blah second blah second blah second blah second blah
    second blah second blah second blah second blah second blah second blah second blah
    second blah second blah second blah second blah second blah second blah second blah
    second blah second blah second blah second blah second blah second blah second blah
    second blah second blah second blah second blah second blah second blah second blah
    </div>

  3. #33
    Join Date
    Apr 2003
    Location
    UK
    Posts
    2,203
    You could try something like this maybe

    PHP Code:
    <script type="text/javascript">

    function 
    toggleMe(){

    el=document.getElementsByTagName("div")

    for(var 
    i=0;i<el.length;i++){

    if(
    el[i].className=="toggle"){

    if(
    el[i].style.display=="none"||el[i].style.display==""){
    el[i].style.display="block"
    }
    else{
    el[i].style.display="none"
    }

    }

    }

    }
    </script>

    <style type="text/css">

    .toggle{
    display:none;
    }
    </style>


    <input type="button" onclick="toggleMe()" value="Details"><br>

    <div id="first1" class="toggle">
    first blah first blah first blah first blah first blah first blah first blah first blah first blah first blah 
    first blah first blah first blah first blah first blah first blah first blah first blah first blah first blah 
    first blah first blah first blah first blah first blah first blah first blah first blah first blah first blah 
    first blah first blah first blah first blah first blah first blah first blah first blah first blah first blah 
    first blah first blah first blah first blah first blah first blah first blah first blah first blah first blah 
    </div>
    <p>Some more text and tags in between the first blah and second blah</p>
    <div id="second1" class="toggle">
    second blah second blah second blah second blah second blah second blah second blah 
    second blah second blah second blah second blah second blah second blah second blah 
    second blah second blah second blah second blah second blah second blah second blah 
    second blah second blah second blah second blah second blah second blah second blah 
    second blah second blah second blah second blah second blah second blah second blah 
    </div> 
    Last edited by Mr J; 06-13-2006 at 06:28 PM.

  4. #34
    Join Date
    Jun 2006
    Posts
    2
    How may I make the expanded text expand some more?
    I'm trying to make something like this.

    Number 1
    ->Part (a)
    --->Question (i)
    --->Question (ii)
    ->Part (b)
    --->Question (i)
    --->Question (ii)

    (and so on)

  5. #35
    Join Date
    Jun 2006
    Posts
    2
    oh. i just found out. i just had to change the para1 to para2 and so on.
    xD

  6. #36
    Join Date
    Oct 2008
    Location
    Jensen Beach, FL
    Posts
    1
    Hi I am very new to forums, I found your info regarding: Expand/Collapse Paragraph, etc.
    I have a website with a orderform and I would like to be able to Expand/Collapse my orderform page, right now I have 5 order areas on the page for ordering up to 5 products. I would ike to have say just the top one appear between the yellow bars and have a button that says: "Add Another Item" then another order area would appear, ie, Item #2 (optional) Item #3 (optional) etc.. is that possible to do with my form...? Here is a link to my order page: http://www.logoclick.com/order/

  7. #37
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,689
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    .hide{
      display:none;
    }
    
    /*]]>*/
    </style><script language="JavaScript" type="text/javascript">
    /*<![CDATA[*/
    
    
    function Init(id){
     var table=document.getElementById(id);
     var tbodies=table.getElementsByTagName('TBODY');
     for (var zxc0=0;zxc0<tbodies.length;zxc0++){
      var rows=tbodies[zxc0].getElementsByTagName('TR');
      for (var zxc0a=0;zxc0a<rows.length;zxc0a++){
       rows[zxc0a].style.display='block';
      }
    
      if (zxc0>0){
       tbodies[zxc0].style.display='none';
      }
     }
    }
    
    function More(obj,cls){
     var table=obj;
     var tbody;
     while (table.parentNode){
      if (table.nodeName.toUpperCase()=='TBODY') tbody=table;
      if (table.nodeName.toUpperCase()=='TABLE') break;
      table=table.parentNode;
     }
     if (tbody.nodeName.toUpperCase()=='TBODY'&&table.nodeName.toUpperCase()=='TABLE'){
      var tbodies=table.getElementsByTagName('TBODY');
      for (var zxc0=0;zxc0<tbodies.length;zxc0++){
        var rows=tbodies[zxc0].getElementsByTagName('TR');
        for (var zxc0a=0;zxc0a<rows.length;zxc0a++){
         if (rows[zxc0a].className&&rows[zxc0a].className==cls){
          rows[zxc0a].style.display='none';
          break;
         }
        }
       if (tbodies[zxc0]==tbody&&tbodies[zxc0+1]){
        tbodies[zxc0+1].style.display='block';
        return;
       }
      }
     }
    }
    /*]]>*/
    </script></head>
    
    <body onload="Init('tst');">
    <form name="" >
    <table id="tst" border="1">
    <tbody>
      <tr>
        <td>
        Item 1
        </td>
      </tr>
      <tr>
        <td>
        <input name="" />
        </td>
      </tr>
      <tr class="hide">
        <td  >
        <input type="button" name="" value="More" onclick="More(this,'hide');"/>
        </td>
      </tr>
    </tbody>
    <tbody>
      <tr>
        <td>
        Item 2
        </td>
      </tr>
      <tr>
        <td>
        <input name="" />
        </td>
      </tr>
      <tr class="hide">
        <td >
        <input type="button" name="" value="More" onclick="More(this,'hide');"/>
        </td>
      </tr>
    </tbody>
    <tbody>
      <tr>
        <td>
        Item 2
        </td>
      </tr>
      <tr>
        <td>
        <input name="" />
        </td>
      </tr>
      <tr class="hide">
        <td >
        <input type="button" name="" value="More" onclick="More(this,'hide');"/>
        </td>
      </tr>
    </tbody>
    <tbody>
      <tr>
        <td>
        Item 3
        </td>
      </tr>
      <tr>
        <td>
        <input name="" />
        </td>
      </tr>
      <tr class="hide">
        <td >
        <input type="button" name="" value="More" onclick="More(this,'hide');"/>
        </td>
      </tr>
    </tbody>
    <tbody>
      <tr>
        <td>
        Item 4
        </td>
      </tr>
      <tr>
        <td>
        <input name="" />
        </td>
      </tr>
      <tr class="hide">
        <td >
        <input type="button" name="" value="More" onclick="More(this,'hide');"/>
        </td>
      </tr>
    </tbody>
    <tbody>
      <tr>
        <td>
        Item 5
        </td>
      </tr>
      <tr>
        <td>
        <input name="" />
        </td>
      </tr>
      <tr class="hide">
        <td >
        <input type="button" name="" value="More" onclick="More(this,'hide');"/>
        </td>
      </tr>
    </tbody>
    <tbody>
      <tr>
        <td>
        Item 6
        </td>
      </tr>
      <tr>
        <td>
        <input name="" />
        </td>
      </tr>
    </tbody>
    </table>
    </form>
    </body>
    
    </html>
    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/

  8. #38
    Join Date
    Nov 2008
    Posts
    3
    Hi, I didn't want to create a new thread since I have a problem relating to an expand/collapse feature. Following is my problem:

    I have 2 rows in a table...

    HTML Code:
    <table>
      <tr id="40807386" class="hidden ">testing this</tr>
      <tr id="34893485" class="hidden ">testing this again</tr>
    </table>
    So I can hide this row by going
    Code:
    $('.hidden').toggle();
    but this hides both the rows when I only want to hide the first row, not both. Is there a way to get the id of the element so that I can go something like
    Code:
    ($(this).id).toggle()
    This ^ gives me an error but I need to be able to do something similar. Any help on this would be greatly appreciated

    Thanks

  9. #39
    Join Date
    Feb 2007
    Posts
    63

    brace for the ultimate in noob questions

    Hi, i'm working on an XML transform and i'd like to do exactly the same thing but without buttons. I can get it to work with a href but I want to be able to change the text that the href is displaying for example :


    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>


    HTML Code:
    <a href ="#" class=menutoggle" onclick="return toggleMe('para1')">Heading [+]</a>
    <p id="para1">
    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
    </p>
    So it will look like:

    Heading [+] - Uncollapsed

    and

    Heading [-] - Collapsed
    blah blah blah blah blah blah blah blah

    I tried using e.innerHTML to change the Heading value but it doesn't like that, it just prints out when the menu is expanded and not the actual paragraph.

    Thanking j00
    Last edited by AlaNio; 03-25-2009 at 09:13 AM.

  10. #40
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,689
    Code:
        <script type="text/javascript">
    function toggleMe(a){
     var evt=window.event||arguments.callee.caller.arguments[0];
     var obj=window.event?evt.srcElement:evt.target;
     if(obj.nodeType==3) obj=obj.parentNode;
    var e=document.getElementById(a);
    if(!e)return true;
    if (e.style.display == "none") {
        e.style.display = "block"
       obj.innerHTML=obj.innerHTML.replace('-','+');
    }
    else {
        e.style.display = "none"
       obj.innerHTML=obj.innerHTML.replace('+','-');
    }
    return true;
    }
    </script>
    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/

  11. #41
    Join Date
    Apr 2009
    Posts
    1
    it's very easy with a simple javascript. here is an example:
    http://n1scripts.com/javascripts/jav...=scripts&id=12

  12. #42
    Join Date
    Aug 2009
    Location
    New York
    Posts
    1
    Hi, I'm new to this forum and find it very helpful. I've also found the original expand/collapse JS (that started this thread) very helpful as well as I've just starting to teach myself HTML and web page development.

    The web pages are organized along the lines of chapters in a book, following a table of contents organization where the reader can go deeper and deeper into an area as they wish. And so I've used the expand/collapse feature extensively throughout the web pages I've made so far. Each page covers a broad topic area, but within each specific topic areas are initially in a "collapsed" form until the reader clicks further on a topic to see it in an expanded form. And so "expansion" of a topic area only occurs via the onclick approach for the blocks of info associated with the relevant ID label used in the ToggleMe function.

    At the same time however, I'd like to create an index page (like in the back of a reference book) where a user could select a specific topical item from an indexed list, and the link would take the user to the relevant web page, and section of the page with that particular information would already be in the "expanded" mode. In this scenario, the reader would not have to click any further to get to see the fully expanded piece of information.

    I hope this is understandable and wonder if anyone has any technical advice on how to do this.

    Thanks -- Mark.

  13. #43
    Join Date
    Apr 2010
    Posts
    1
    Quick question: If I have three of these hidden <div>s on one page, every time the user shifts from one "tab" to another, how do I make the others disappear until the user clicks on their button again?

  14. #44
    Join Date
    May 2006
    Location
    the north of england
    Posts
    2

    adding a expand all / collapse all button to this code

    Quote Originally Posted by Ultimater View Post
    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 
    </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 
    </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 
    </span>
    Thanks for this code - it works great!
    I'm having a bit of trouble adding a expand all/collapse all button at the top of my page. I've looked on other websites, but obviously they don't follow the same code!
    Is there an easy way of doing it cos I can only get it to show all toggle buttons or hide all toggle buttons and not the detail in each one.

    Hope this makes sense!

    TIA x

  15. #45
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,689
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <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;
    }
    
    function toggleAll(p,a){
     for (var z0=1;document.getElementById(p+z0);z0++){
      document.getElementById('para'+z0).style.display=a?'block':'none';
     }
    }
    
    </script>
    
    </head>
    
    <body>
    <input type="button" onclick="return toggleAll('para')" value="Hide"><br>
    <input type="button" onclick="return toggleAll('para',true)" value="Show"><br>
    <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
    </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
    </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
    </span>
    </body>
    
    </html>
    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/

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