www.webdeveloper.com
Page 4 of 6 FirstFirst ... 23456 LastLast
Results 46 to 60 of 90

Thread: Expand/Collapse Paragraph

  1. #46
    Join Date
    May 2006
    Location
    the north of england
    Posts
    2
    Quote Originally Posted by vwphillips View Post
    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>
    Thanks loads! works a treat

  2. #47
    Join Date
    Sep 2010
    Posts
    1
    Hello, I am new to this section and managed to work the actual thing first time thanks to the good thread it is,

    But on my Menu people will set what they want collapsed etc and what they ont, but as soon as they click onto a new page all the menu just uncollapses again? meaning its pointless to use seeing as you wont be on one page for that long.

    How can i stop this happening?

  3. #48
    Join Date
    Sep 2010
    Posts
    1

    Red face Aligning the Text/Buttons

    Hi all

    Working with students and developing a site using some of the very useful above 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>
    We are using this code as we can easily style the headers. Can you suggest ways we can align the headers, to the right for instance.

    Thank you.

  4. #49
    Join Date
    Dec 2010
    Posts
    4

    Keeping the div closed when changing pages

    Hey All,

    I am using this idea to close a footer on a php site. My issue is that once I click a link to a different page, the footer displays again. How can I keep the display set to none? Any ideas are very appreciated!

    Thanks!

  5. #50
    Join Date
    Feb 2011
    Posts
    6

    expand/collapse script

    Hi,

    I have tried the script given here for expanding / collapsing text. It works fine, however, having a button is not really nice. I would rather to have a text instead of the button, showing the first line of the text and once you click on the text title, it expands to show the whole text. like this:

    This is the title which is clickable

    This is the first line of the text which shows by default

    This is the bla bla bla blabla section which shows after clicking on the clickable line.

    Can anyone suggest how to modify the script given here to do the task I mentioned.
    Many thanks in advance.

  6. #51
    Join Date
    Dec 2010
    Posts
    4

    RE: Using a link instead of buttons

    Hello xironet,

    Try this!

    <code>
    <body>
    <a href="javascript:void();" onclick="return toggleAll('para')">show all</a><br>
    <a href="javascript:void();" onclick="return toggleAll('para',true)">hide all</a><br>
    <a href="javascript:void();" onclick="return toggleMe('para1')">Title Here<br>
    <p>First sentence that displays by default here.</p>
    <p id="para1">
    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
    </p>
    </body>
    </code>

    Basically you are just moving the onclick event to a link that refreshes the page. Hope this helps!

  7. #52
    Join Date
    Feb 2011
    Posts
    6
    Hi,
    Many thanks for your help. It works with slight problem, I paste my code here:

    <!DOCTYPE html>
    <html>

    <head>
    <meta content="text/html; charset=windows-1252" http-equiv="Content-Type">
    <title>Untitled 1</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;
    }
    </script>

    </head>

    <body><!-->
    <a href="javascript:void();" onclick="return toggleAll('para')">show all</a><br><!-->
    <a href="javascript:void();" onclick="return toggleAll('para',true)">hide all</a><br>
    <a href="javascript:void();" onclick="return toggleMe('para1')">Treatment in the UK<br>
    Treatment in the UK is one of the best in the world.
    <p id="para1">
    Treatment in the UK is one of the best in the world.blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
    blah blah blah blah blah blah blah blah blah blah blah blah 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>
    </span>
    </body>

    </html>

    And this is what I get in browser:

    show all
    hide all
    Treatment in the UK
    Treatment in the UK is one of the best in the world.
    Treatment in the UK is one of the best in the world.blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah

    Now, line, Treatment in the UK & Treatment in the UK is one... are joined together. The first Treatment in the UK is what I wrote in the title and the next line is my first line which should show by default. Once I click on the "title" the first line shoul expand and show the blahblah section. It doesn't quite work that way.
    You have the full code perhaps you can see it for yourself.

    Many thanks in advance.

    Regards,

    Hamid

  8. #53
    Join Date
    Dec 2010
    Posts
    4
    OK, try this. I changed the <p id="para1"> to a div instead and included the first sentence inside just a standard <p> tag.

    <code>
    <body><!-->
    <a href="javascript:void();" onclick="return toggleAll('para')">show all</a><br><!-->
    <a href="javascript:void();" onclick="return toggleAll('para',true)">hide all</a><br>
    <a href="javascript:void();" onclick="return toggleMe('para1')">Treatment in the UK<br>
    <p>Treatment in the UK is one of the best in the world. <div 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</div>
    </p>
    <br>
    </span>
    </body>
    </code>

  9. #54
    Join Date
    Feb 2011
    Posts
    6
    Hi Dear,

    Many thanks for your help, it is great. It works fine with a slight problem. I have actually uploaded the site in a dummy domain I have for you to see. Please go to :
    http://www.kouroshamini.co.uk/treatment.html please use exact link.

    Problems that I see are:

    1-The text colour has changed to red.
    2- The lower paragraphs depend on the top one. In other words, when I click on paragraph 3, it hides or open parageraph 4. Similarly, clicking parageraph 2, hids/show parageraphs 3 and 4, and so on.

    I copy the bit of code I have for you here:

    <a href="javascript:void();" onclick="return toggleMe('para1')">Treatment in the UK</p>
    <span lang="en-gb">
    <p>Treatment in the UK is one of the best in the world. <div id="para1">
    <p>blah blah blah blah blah blah blah blah blah blah blah blah 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>

    <a href="javascript:void();" onclick="return toggleMe('para2')">Treatment in Europe<br />
    <p>Treatment in Europe is one of the best in the world. <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</p>

    <a href="javascript:void();" onclick="return toggleMe('para3')">Treatment in US<br />
    <p>Treatment in Europe is one of the best in the world. <div 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</p>

    <a href="javascript:void();" onclick="return toggleMe('para4')">Treatment in Asia</p>
    <p>Treatment in Europe is one of the best in the world. <div id="para4">
    blah blah blah blah blah blah blah blah blah blah blah blah 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>
    </div>
    </div>
    </div>

    By the way on the top of the page I have some Javascript code which I mention here, not sure if they are relevent:

    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <link href="style.css" rel="stylesheet" type="text/css" />
    <link href="layout.css" rel="stylesheet" type="text/css" />
    <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>
    <script src="maxheight.js" type="text/javascript"></script>
    <script type="text/javascript">
    <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>
    </script>
    <style type="text/css">
    .auto-style1 {
    font-size: small;
    }
    </style>
    </head>




    I hope you can help on this.

    My appriciation in advance.

    Regards,

    Hamid
    Last edited by xironet; 02-22-2011 at 03:29 PM.

  10. #55
    Join Date
    Dec 2010
    Posts
    4
    Hi Hamid,

    This should fix the issue with the paragraphs hiding. The </div>s need to be after each paragraph as below to tell the page where each paragraph ends:

    <a href="javascript:void();" onclick="return toggleMe('para1')">Treatment in the UK</p>
    <span lang="en-gb">
    <p>Treatment in the UK is one of the best in the world. <div id="para1">
    <p>blah blah blah blah blah blah blah blah blah blah blah blah 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></div>

    <a href="javascript:void();" onclick="return toggleMe('para2')">Treatment in Europe<br />
    <p>Treatment in Europe is one of the best in the world. <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</p></div>

    <a href="javascript:void();" onclick="return toggleMe('para3')">Treatment in US<br />
    <p>Treatment in Europe is one of the best in the world. <div 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</p></div>

    <a href="javascript:void();" onclick="return toggleMe('para4')">Treatment in Asia</p>
    <p>Treatment in Europe is one of the best in the world. <div id="para4">
    blah blah blah blah blah blah blah blah blah blah blah blah 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></div>

    As for the text turning red, that must have something to do with the stylesheets that are included (style.css and layout.css). Check in there to see if there is code that sets the font color to red. Best of luck!
    Last edited by tjfoz; 02-23-2011 at 01:26 PM. Reason: highlighted changes in code

  11. #56
    Join Date
    Feb 2011
    Posts
    6
    Hi,

    Thank you very much, you are a star. There is a small hicup though. Everything works perfect apart from the fact that when the page is loaded or shows, all the text is in expansion mode. Ideally it should be in closed format until the user clicks on link to expand his requiered link.
    Look forward for your help. You can see it live on the site.

    Regards,

    Hamid

  12. #57
    Join Date
    Mar 2011
    Posts
    2

    I see this thread is really old...

    ....but it brought me here from a google search.
    Rather than start a redundant thread I assume it is best to bring this one back to the top.

    I used the methods suggeste here to set a collapsing paragraph, I thank you it worked great, however when I try to place more than one the second one will not work.
    I changed the para value to 2 on the second one, it does engage the primary, it is seperate at the bottom of the page.
    Can anybody advise, does it have to flow with the primary?
    If not how should it be wrote?

    I use VWB 2010 Express .net developer with .aspx extensions

  13. #58
    Join Date
    Feb 2011
    Posts
    6
    Well! I am not much of expert on this and I learnt it here from tjfoz who is brillient and I must say I still have a little issue with it. Mine works and all you have to do is to copy and paste the code above, dated 02.23.2011 from tjfoz. I don't think having aspx or html extension will make any difference, because you are using javascript for this which will work with .NET happily.
    Anyhow, good luck.

    Hamid

  14. #59
    Join Date
    Mar 2011
    Posts
    2
    I realized that this thread has been updated recently after I set my first post, I tried to modify but I did not see that option.

    Here is what I trying:
    <input para1..... blahblah ect /span> works great

    Text with other information about other things.

    <input para2....blahblah ect /span> the second setting does not work

    Does this explain my problem better?

  15. #60
    Join Date
    Feb 2011
    Posts
    6
    Ok, do what I did, creat a simple blank html page and then copy / past the code below. It works fine. Then transfer the code into your original file bit by bit and find where it goes wrong. Creating a simple file and testing the actual code in it will make you confident that your original code is OK and works, then you can start troubleshooting as soon as you move it over to your aspx file. Let me know how it goes.



    <!DOCTYPE html>
    <html>

    <head>
    <meta content="text/html; charset=windows-1252" http-equiv="Content-Type">
    <title>Untitled 1</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;
    }
    </script>

    </head>

    <body><!-->
    <a href="javascript:void();" onclick="return toggleMe('para1')">My first text here</p>
    <span lang="en-gb">
    <p>A brief note about my first text here. <div id="para1">
    <p>Full text about my first text here ...blah blah blah blah blah blah blah blah blah blah blah blah 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></div>


    <a href="javascript:void();" onclick="return toggleMe('para2')">My 2nd text here.<br/>
    <p>A brief note about my 2nd text here<div id="para2">
    Full text about my 2nd text here ...blah blah blah blah blah blah blah blah blah blah blah blah 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></div>


    <a href="javascript:void();" onclick="return toggleMe('para3')">My 3rd text here<br />
    <p>A brief note about my 3rd text here. <div id="para3">
    Full text about my 3rd text here ...blah blah blah blah blah blah blah blah blah blah blah blah 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></div>


    <a href="javascript:void();" onclick="return toggleMe('para4')">My 4th text here</p>
    <p>A brief note about my 4th text here. <div id="para4">
    Full text about my 4th text here ...blah blah blah blah blah blah blah blah blah blah blah blah 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></div>

    </div>
    </div></span>
    </body>

    </html>
    Last edited by xironet; 03-03-2011 at 06:50 AM. Reason: misspell

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