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

    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:

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

    script language="JavaScript" type="text/javascript">
    Copyright 2005Sandeep Gangadharan -->
    <!-- For 
    more free scripts go to -->
    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(' {text-decoration: underline; color: red}')
    document.writeln('//--></style>') }

    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 "-"; } }
    // -->
    The second part:

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

    ZC 1.38a



  2. #2
    Join Date
    May 2005
    Bath, Somerset
    Plugin Contributions

    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:

      a.expandLnk .expandText {
        color: #330099;
        text-decoration: none;
        font-weight: bold;
    <a onClick="openClose('b1'); return false" href="#" class="expandLnk">
      <span id="tick_b1">+</span> 
      <span class="expandText">Details (click for more/less)</span>
    <div id="b1" class="links">
    <br />
    This blurb is a test for the javascript to expand the text area for more detailed product information. 
    Back, after a 4 year absence! Did you miss me?
    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
    Montreal, Canada
    Plugin Contributions

    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.




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


Posting Permissions

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