JavaScript Collapse Box IMG

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


 
 
Jon ImmsWeb DeveloperAsked:
Who is Participating?
 
CodebotConnect With a Mentor Commented:
Hi
you can use  div or span  and then call function on onclick event of div.
0
 
Jon ImmsWeb DeveloperAuthor Commented:
Sorry to ask, but how would i do that ?
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.