www.webdeveloper.com
Page 5 of 6 FirstFirst ... 3456 LastLast
Results 61 to 75 of 90

Thread: Expand/Collapse Paragraph

  1. #61
    Join Date
    Mar 2011
    Posts
    1

    Thumbs up

    Just for those who are having issues with the font being all red...and not working for the second and third links, it's because the <a> tags aren't being closed... so it's making everything a link.

    here's a revised code for everyone... hope it works for you, cause it works for me. I came across this while searching for some jquery stuff... but surprised no one caught the basic html error of no </a>. I didn't include the actual javascript stuff, cause that's fine; though I did add a class just cause it's helpful sometimes.

    Code:
    <style>
    .para{
    	border: 1px solid red;
    	}
    </style>
    </head>
    
    <body>
    <a href="javascript:void();" onclick="return toggleMe('para1')">My first text here</a>
    <div>A brief note about my first text here.<p id="para1" class="para">
    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>
    <hr>
    <a href="javascript:void();" onclick="return toggleMe('para2')">My 2nd text here.</a>
    <div>A brief note about my 2nd text here<p id="para2" class="para">
    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>
    <hr>
    <a href="javascript:void();" onclick="return toggleMe('para3')">My 3rd text here</a>
    <div>A brief note about my 3rd text here. <p id="para3" class="para">
    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>
    <hr>
    <a href="javascript:void();" onclick="return toggleMe('para4')">My 4th text here</a>
    <div>A brief note about my 4th text here. <p id="para4" class="para">
    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>

  2. #62
    Join Date
    Mar 2011
    Posts
    5
    Ultimater, Mr J - I know your original posts were from half a decade ago, but just thought I'd post a quick thanks. In combination, they gave me exactly the information I needed to make my CV work. Thanks!

  3. #63
    Join Date
    Mar 2011
    Posts
    1
    Hi guys

    I would need some help, am totally new in javascript, actually am waiting for my first javascript class to start by the end of the month. So I found this script here and it does almost what I would need. My needs are when I load the page I need to have all the links to collapsed, which is not the case with this script. And second, if it was possible when you click on one link to expand all other would automatically be collapsed. Could some help me out and just give some explanation on what is added so can start understanding this script. Thanks very much for any help.

    Here is the script

    ***********************
    <HTML>
    <HEAD>
    <TITLE>Document Title</TITLE>

    <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>

    <style type="text/css">
    .toggle{
    display:none;
    }
    </style>

    </HEAD>
    <BODY>

    <a href ="#" class=menutoggle" onclick="return toggleMe('para1')">Heading 1 [+]</a>
    <div id="para1">
    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
    </div>
    <br>
    <a href ="#" class=menutoggle" onclick="return toggleMe('para2')">Heading 2 [+]</a>
    <div id="para2">
    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
    </div>
    <br>
    <a href ="#" class=menutoggle" onclick="return toggleMe('para3')">Heading 3 [+]</a>
    <div id="para3">
    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
    </div>

    </BODY>
    </HTML>
    ***********************

  4. #64
    Join Date
    Mar 2011
    Posts
    5
    The thing about sections starting collapsed is answered by Mr J on the first page - essentially, it involves adding a "display:none" style to each section.

    Another question occurs to me... I'm using a small JPG (expand.jpg) to indicate that a section can be expanded. Is there any easy way to switch it to another image (called, for the sake of argument, collapse.jpg) when the section's expanded and back again when collapsed?

  5. #65
    Join Date
    Oct 2007
    Posts
    161
    I'm using this script, but want the expanded text to continue on the same line as the text already on the screen... at the moment the script is putting a line break <p> in so that the continuing text appears to be a new paragraph..

    Can anyone help with this please? I'm guessing I need to change something in the
    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>
    Also - each toggle I'm using, when clicked returns the page to the top - so the reader has to scroll back down to the text they were reading..... something to do with the <a href="#"> I'm guessing... but how to stop this please?????

  6. #66
    Join Date
    Mar 2011
    Posts
    5
    You don't actually need the <a> at all; it's the onclick= bit that's important, and you can put that on anything. On my CV, for instance, I have something along the lines of
    Code:
    <h3 onclick="return showhide('history')">Employment History</h2>
    <div id="history">INSERT EMPLOYMENT HISTORY HERE</div>
    That way simply clicking the header will show or hide the text. If you want it in line, I suspect it'll be enough to simply use <span> instead of <div>.

  7. #67
    Join Date
    Oct 2007
    Posts
    161
    Thanks - removing the <a href> has helped with the page jumping.... I also replaced <div> with <span> but the expanded text is still appearing on a new line (with no line break inbetween, so its a bit better, but still not perfect!!)

    Any other ideas??

  8. #68
    Join Date
    Mar 2011
    Posts
    5
    Do you have it on a new line in the code? I'm just guessing wildly at this point, but perhaps something like this would work?

    Code:
    <p><font color="blue" onclick="return showhide('hiddenstuff')">Click here</font><span id="hiddenstuff"> to show this</span.
    Could that work?

  9. #69
    Join Date
    Oct 2007
    Posts
    161
    No that doesn't help.... here's an example of the code which I'm trying to get to continue on the same line

    Code:
    avionics area is just being  realised, <span onclick="return toggleMe('para1')" value="Toggle" class="texthighlight">more/less&raquo;</span><span id="para1" style="display:none">future air traffic management
    and a link to view the page: http://www.gps-world.biz/avionics.php

    and its the first more/less>> on the page that I've shown you......

  10. #70
    Join Date
    Mar 2011
    Posts
    5
    I see what you mean. Needs someone more knowledgeable than me to answer that - using the hide code on my website CV last month is my first foray into this sort of thing.

    Incidentally, my dad works with GPS, GNSS, SESAR and whatnot...

  11. #71
    Join Date
    Jul 2006
    Posts
    128
    Quote Originally Posted by awmperry View Post
    Another question occurs to me... I'm using a small JPG (expand.jpg) to indicate that a section can be expanded. Is there any easy way to switch it to another image (called, for the sake of argument, collapse.jpg) when the section's expanded and back again when collapsed?
    Pretty simple, really. Just a modification to the original function:
    Code:
    <script type="text/javascript">
    function toggleMe(a, b){
    var e=document.getElementById(a);
    var f=document.getElementById(b);
    if(!e || !f)return true;
    if(e.style.display=="none"){
    e.style.display="block";
    f.src="collapse.jpg";
    }
    else{
    e.style.display="none";
    f.src="expand.jpg";
    }
    return true;
    }
    </script>
    Then, when you call the function toggleMe, you ALSO need to add the ID of the img as the second parameter.

  12. #72
    Join Date
    Jul 2006
    Posts
    128
    @LouPhi

    Currently in ToggleMe, the display format is being changed to "block". This means, by default, that a new "block" of text is created (hence, a new line). To display it in the same line, change
    e.style.display="block"
    to
    e.style.display="inline"

    You can read up on all the possible display formats here:
    http://www.w3schools.com/css/pr_class_display.asp

  13. #73
    Join Date
    Oct 2007
    Posts
    161
    Thanks irf2k, that seems so obvious now you've told me

    I love the idea of changing the 'expand' to 'collapse' once the text is expanded, so I'm also trying your solution to awmperry regarding swapping the image... can you please (as I'm not technical in any way shape or form!) explain what you mean by 'add the ID of the img as the second parameter'?

    I'm expanding the text using:

    Code:
    <span onclick="return toggleMe('para1')" value="Toggle" class="texthighlight"><img src="http://www.chronos.co.uk/images/expand.jpg" width="37" height="11" alt="" /></span><span id="para1" style="display:none">
    And I'm assuming I need to add something to the <span id="para1"....> part?

    Thanks for your help with this...

  14. #74
    Join Date
    Jul 2006
    Posts
    128
    Close...
    the original <span id="para1"...> stays the same. That ID is there so that we can reference it (hence, you can only use the id "para1" once in a page, otherwise it gets confusing)
    so, if we want to talk about the image, we need to give it an id as well. so this:
    Code:
    <img src="http://www.chronos.co.uk/images/expand.jpg" width="37" height="11" alt="" />
    becomes this:
    Code:
    <img src="http://www.chronos.co.uk/images/expand.jpg" width="37" height="11" alt="" id="img1" />
    Now we come to "adding the id of the image as the second parameter".
    The function toggleMe only had one parameter (a), and we have added a second one, so it is now (a, b)
    When you call the function like you currently do:
    Code:
    <span onclick="return toggleMe('para1')"
    It will not work, because it expects TWO values, para1 and something else, so we put:
    Code:
    <span onclick="return toggleMe('para1', 'img1')"
    And of course, if you're using this more than once on a page, the next paragraph would be id='para2' and the next img would be id='img2'.

  15. #75
    Join Date
    Jun 2011
    Posts
    6
    Hi guys. Thanks for these scripts.

    I would like a way to do allow only one "question" expanded. Only the question clicked should display, when another question is clicked it should collapse this one and open the next...

    Thanks!

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