Results 1 to 3 of 3
  1. #1
    Join Date
    Jan 2009
    Location
    Montreal, Canada
    Posts
    228
    Plugin Contributions
    0

    Default Trying to tweak Javascript for Collapsible Text

    I got this script already adjusted from its original source and it's close to what I'd like, but I've tried and can't figure out how to tweak it further. It's for some of my Product Info pages so that a customer can click to view more details instead of crowding the page with text from the get-go.

    Can someone tell me how to make the link "+Details (click for more/less)" appear in bold blue as all my other links (before and after they're clicked)? My blue is the colour 330099.

    The first part of the script:

    PHP Code:
    <!-- COLLAPSIBLE MENU -->

    <!-- 
    This goes into the HEAD of the html file -->

    <
    script language="JavaScript" type="text/javascript">
    <!-- 
    Copyright 2005Sandeep Gangadharan -->
    <!-- For 
    more free scripts go to http://www.sivamdesign.com/scripts/ -->
    <!--
    if (
    document.getElementById) {
     
    document.writeln('<style type="text/css"><!--')
     
    document.writeln('.links {display:none; padding-left:14px}')
     
    document.writeln('.link {text-decoration:none; color:blue}')
     
    document.writeln('a:hover.link {text-decoration: underline; color: red}')
     
    document.writeln('//--></style>') }

    function 
    openClose(theID) {
     if (
    document.getElementById(theID).style.display == "block") {
         
    document.getElementById(theID).style.display "none";
         
    document.getElementById("tick_"+theID).innerHTML "+"; }
     else {
         
    document.getElementById(theID).style.display "block";
         
    document.getElementById("tick_"+theID).innerHTML "-"; } }
    // -->
    </script> 
    The second part:

    PHP Code:
    <div onClick="openClose('b1')" style="cursor:hand; cursor:pointer"><span id="tick_b1">+</span
    <
    span onMouseOver="this.style.color='#330099';this.style.textDecoration='none';" onMouseOut="this.style.color='#330099';this.style.textDecoration='none';">
    Details (click for more/less)
    </
    span></div>
    <
    div id="b1" class="links">
    <
    br />
    This blurb is a test for the javascript to expand the text area for more detailed product information
    </
    div
    Link to the product on my site I'm testing this on: http://www.alexandergifts.ca/index.p...roducts_id=371

    ZC 1.38a

    Cheers,

    Robbie

  2. #2
    Join Date
    May 2005
    Location
    Bath, Somerset
    Posts
    1,058
    Plugin Contributions
    3

    Default Re: Trying to tweak Javascript for Collapsible Text

    Not really sure why the original coder decided to use DIVs for the openClose function firing, when you can easily replace tehm with <a> and this has built in procedures for :hover states, and of course the onclick="" function.

    If it was my site, I would do something like:

    Code:
    <style>
      a.expandLnk .expandText {
        color: #330099;
        text-decoration: none;
        font-weight: bold;
      }
    </style>
    
    <a onClick="openClose('b1'); return false" href="#" class="expandLnk">
      <span id="tick_b1">+</span> 
      <span class="expandText">Details (click for more/less)</span>
    </a>
    <div id="b1" class="links">
    <br />
    This blurb is a test for the javascript to expand the text area for more detailed product information. 
    </div>
    Absolute
    Homeless due to the disappearance of the CHW forum!
    Absolute Web Solutions Ltd
    Interested in our work? Take a look at one of our sites - The Tech Store

  3. #3
    Join Date
    Jan 2009
    Location
    Montreal, Canada
    Posts
    228
    Plugin Contributions
    0

    Default Re: Trying to tweak Javascript for Collapsible Text

    Thanks for a quick and helpful answer! I copied yours and it works even better because I can now place the link right after the regular text, no line break.

    R

 

 

Similar Threads

  1. Collapsible Panels
    By breauxlg in forum Templates, Stylesheets, Page Layout
    Replies: 3
    Last Post: 2 Mar 2012, 05:50 AM
  2. Collapsible Attributes
    By Dave Mc in forum Setting Up Categories, Products, Attributes
    Replies: 0
    Last Post: 7 Jul 2010, 03:58 PM
  3. Trying to add Ultimate Fade In Slideshow javascript to my site
    By plymgary1 in forum General Questions
    Replies: 6
    Last Post: 29 Apr 2010, 04:39 PM
  4. Trying to use Javascript window.opener to redraw the page
    By bestrong in forum General Questions
    Replies: 3
    Last Post: 23 Dec 2008, 03:59 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
disjunctive-egg
Zen-Cart, Internet Selling Services, Klamath Falls, OR