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 12 of 12
  1. #1
    New Coder
    Join Date
    Jun 2005
    Posts
    54
    Thanks
    0
    Thanked 0 Times in 0 Posts

    collapsing / expanding paragraphs

    I've seen the technique I think on one of the Microsoft sites for FAQs.

    Essentially each question in the FAQ is a link which when clicked pushes the next question down to make room for the answer.

    I think there was a link to expand/collapse all too.

    Does anybody know if anyone's documented this or is there some code I could butcher?

    Thanks

    jonathan

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    This link seems like it might help you. Its basically just setting the display properties of the paragraphs to none and then to block. If you want them to where they stay open and not make the previous one close well you might just have to tweak the code in the link provided a bit.

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Location
    Victoria, BC, Canada
    Posts
    962
    Thanks
    0
    Thanked 1 Time in 1 Post
    You could also look at Contractible Headers on the same website...same general idea, but it has an option of keeping other items open when you click a new item, and for the browser to remember the last open items (using a cookie) in case you leave the page and come back.

  • #4
    New Coder
    Join Date
    Jun 2005
    Posts
    54
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks to both of you. I've implemented the script on this page:

    http://www.numberstore.net/faq.asp

    and added the following code to my stylesheet to match the h3 tags. Is there a simple way to get these to change colour on mouseover, like the "contact page" link above them.

    thanks

    jonathan

    h3 {
    font-weight: bold;
    font-size: 10px;
    color: #064AAB;
    margin: 10px 0;
    }


    <h3 onClick="expandcontent('sc1')" style="cursor:hand; cursorointer">What is JavaScript?</h3>
    <div id="sc1" class="switchcontent">
    JavaScript is a scripting language originally developed by Netscape to add interactivity and power to web documents. It is purely client side, and runs completely on the client's browser and computer.
    </div>

  • #5
    Regular Coder Ranger56's Avatar
    Join Date
    Mar 2005
    Location
    Kent, WA.
    Posts
    783
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jonathanscary
    Thanks to both of you. I've implemented the script on this page:

    http://www.numberstore.net/faq.asp

    and added the following code to my stylesheet to match the h3 tags. Is there a simple way to get these to change colour on mouseover, like the "contact page" link above them.

    thanks

    jonathan

    h3 {
    font-weight: bold;
    font-size: 10px;
    color: #064AAB;
    margin: 10px 0;
    }


    <h3 onClick="expandcontent('sc1')" style="cursor:hand; cursor:pointer">What is JavaScript?</h3>
    <div id="sc1" class="switchcontent">
    JavaScript is a scripting language originally developed by Netscape to add interactivity and power to web documents. It is purely client side, and runs completely on the client's browser and computer.
    </div>
    Why do you have two cursor styles?

  • #6
    New Coder
    Join Date
    Jun 2005
    Posts
    54
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I don't know - that's how the script is provided on dynamic drive - it did cross my mind too though!

  • #7
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Jon you would need to use a link to make them change color on hover
    Code:
    <h3><a href="#" onclick="expandcontent('sc1');return false">What is JavaScript?</a></h3>
    <div id="sc1" class="switchcontent">
    JavaScript is a scripting language originally developed by Netscape to add interactivity and power to web documents. It is purely client side, and runs completely on the client's browser and computer.
    </div>
    Then change this
    Code:
    h3 {
    font-weight: bold;
    font-size: 10px;
    color: #064AAB;
    margin: 10px 0;
    }
    to this
    Code:
    h3 {
    font-weight: bold;
    font-size: 10px;
    margin: 10px 0;
    }
    h3 a, h3 a:link, h3 a:visited, h3 a:active {
    color: #064AAB;
    text-decoration:none;
    }
    h3 a:hover {
    color: #FF0000; /*change the hex value to one you desire*/
    }

  • #8
    New Coder
    Join Date
    Jun 2005
    Posts
    54
    Thanks
    0
    Thanked 0 Times in 0 Posts
    And now I know why - because it doesn't work in Firefox if you lose the cursorointer style (hand isn't a valid css style is it???).

  • #9
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    No hand is not valid but using the code i just gave you, you won't need it because they will be treated as links.

  • #10
    Regular Coder
    Join Date
    Jun 2002
    Location
    Victoria, BC, Canada
    Posts
    962
    Thanks
    0
    Thanked 1 Time in 1 Post
    You can actually put an A element inside the h4 and target your style to that instead. In fact, you don't actually need the h4 at all - the script doesn't depend on the type of element being used, just the class and javascript action. So you could leave out the h4 altogether, and put the classheader class in the A element itself, as well as the onlick attribute.

    Ranger56: there are two cursor styles because the netscape line of browsers uses a different cursor for the link rollover, so there are two styles to ensure that both netscape and IE get an appropriate cursor. Actually, the default script has no links at all, just the h4's. Javascript and styles are used on those h4's to simulate links, which is a bit redundant.

  • #11
    New Coder
    Join Date
    Jun 2005
    Posts
    54
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Perfect Aerospace - I'm indebted to you guys for all the help with this. Many thanks!!!! (AGAIN!)


  • #12
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Grant is correct you don't really need the headers but I see what you are trying to do. You are trying to draw attention to them for the search engines.


  •  

    Posting Permissions

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