Solved

JavaScript Collapse Box  IMG

Posted on 2010-11-23
4
401 Views
Last Modified: 2012-06-27
I am working in Drupal with a collapseable javascript box.  At the moment, We have Text which you click to open and close the box. What we want to do, and are trying to do, is in place of text, we want an image(Button) to be click-able to open and close the box.

I have tried just inserting an image, but when you click the image button, the box collapses and so does the button, and you are unable to open the box again. If after the button i put a single character in this case "X" i can click the image, to close the box, but only the "X" appears on the closed box.

I have attached a screenshot of the button and X, also the code and file of the collapsible.js.

Could somebody help me with this please.

// Turn the legend into a clickable link and wrap the contents of the fieldset
    // in a div for easier animation
    var text = this.innerHTML;
      $(this).empty().append($('<a href="#">'+ text +'</a>').click(function() {
        var fieldset = $(this).parents('fieldset:first')[0];
        // Don't animate multiple times
        if (!fieldset.animating) {
          fieldset.animating = true;
          Drupal.toggleFieldset(fieldset);
        }
        return false;
      }))
      .after($('<div class="fieldset-wrapper"></div>')
      .append(fieldset.children(':not(legend):not(.action)')))
      .addClass('collapse-processed');

Open in new window


 
 
0
Comment
Question by:jonathan1978
4 Comments
 
LVL 6

Accepted Solution

by:
Codebot earned 500 total points
ID: 34203422
Hi
you can use  div or span  and then call function on onclick event of div.
0
 

Author Comment

by:jonathan1978
ID: 34209766
Sorry to ask, but how would i do that ?
0

Featured Post

Optimizing Cloud Backup for Low Bandwidth

With cloud storage prices going down a growing number of SMBs start to use it for backup storage. Unfortunately, business data volume rarely fits the average Internet speed. This article provides an overview of main Internet speed challenges and reveals backup best practices.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
This article will shed light on the latest trends when it comes to your resume building needs. For far too long, the traditional CV format has monopolized the recruitment market.
In this fifth video of the Xpdf series, we discuss and demonstrate the PDFdetach utility, which is able to list and, more importantly, extract attachments that are embedded in PDF files. It does this via a command line interface, making it suitable …
With the power of JIRA, there's an unlimited number of ways you can customize it, use it and benefit from it. With that in mind, there's bound to be things that I wasn't able to cover in this course. With this summary we'll look at some places to go…

813 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now