Support » Plugins and Hacks » Collapse-O-Matic » [Resolved] [Plugin: jQuery Collapse-O-Matic] replace arrow and text with own image

[Resolved] [Plugin: jQuery Collapse-O-Matic] replace arrow and text with own image

Viewing 12 replies - 1 through 12 (of 12 total)
  • Plugin Author Baden


    Yes you can, but you will need to know a bit about css do it.

    One thing to keep in mind: do not simply replace the arrow images in the plugin’s folder, as these will be overwritten when the plugin is updated. Rather, do the following:

    1. Add the arrow-up.png and arrow-down.png images you want to use to your theme’s image folder.
    2. Add the following to your theme’s style.css file:
      .collapseomatic {
      	background-image: url(images/arrow-down.png);
      .colomat-close {
      	background-image: url(images/arrow-up.png);
    3. If the spacing needs to be adjusted fit the new images, then add and adjust:
      padding: 0 0 10px 16px;
      to the .collapseomatic definition you added in step above

    Give that a try, and let us know how it all worked out.


    Hi Baden,

    I am very very sorry for bothering you before I had properly read all your documentation!!!

    I found a doc that showed me how to add the pic 🙂


    Sorry again!

    Hi guys.
    Im really sorry but i want to ask you to write for me a simple how to on replacing the text with a image button. I have tried to insert this code:

    [expand title=”<img src=’falcon_girl.jpg’ />” tag=”div”]Target Content[/expand]

    and replace the ‘falcon_girl.jpg’ with an image url from my site but it didnt work, i have seen the documentation too, but im not really a programmer 🙂

    If you could write a dummy-type tutorial i would be very grateful.
    Thanks in advance.

    Plugin Author Baden


    please share the exact shortcode you are trying to use. A link to the page you are working on is always helpful as well.

    Good Morning,

    I have successfully replaced the arrow image (thanks for the .psd file!), and, unfortunately, I am having issues with moving the file around via CSS. I currently have

    .collapseomatic {
        background-image: url(http://algebranation.com/wp-content/uploads/2012/11/arrow_24x26-copy.png) !important;
    padding: 0 0 0 16px;
    .colomat-close {
        background-image: url(http://algebranation.com/wp-content/uploads/2012/11/down_arrow-2-copy.png) !important;

    and the page is located at http://algebranation.com/teachervideos/ (password is algebranation2012).

    Basically, I cannot figure out how to move the arrow down so that it points to the center of the letter. Thanks so much for your help on this!

    Plugin Author Baden


    if you change the size of the arrows, you might have to adjust the background-position property in css to center the arrows.

    Thank you for the response!

    background-position:0% 50%;
    and it’s displaying perfectly.


    I got this to work but now I want to have certain menus to stay expanded and I can’t get it working.

    Here’s the code I’m using for this one image on a page (icon says ERA: 1990s):

    <img src="http://www.vintageland.com/Ebay/images/icons/1990s_men_black.png" id="men5" class="collapseomatic noarrow" expanded="true"  />
    <div id="target-men5" class="collapseomatic_content">
    <body onLoad="MM_preloadImages('http://www.vintageland.com/Ebay/images/icons/mens_buttondown.png','http://www.vintageland.com/Ebay/images/icons/mens_pants.png','http://www.vintageland.com/Ebay/images/icons/mens_jacket.png','http://www.vintageland.com/Ebay/images/icons/mens_coat.png','http://www.vintageland.com/Ebay/images/icons/mens_accessories.png','http://www.vintageland.com/Ebay/images/icons/mens_accessories_black.png','http://www.vintageland.com/Ebay/images/icons/mens_coat_black.png','http://www.vintageland.com/Ebay/images/icons/mens_jacket_black.png','http://www.vintageland.com/Ebay/images/icons/mens_pants_black.png','http://www.vintageland.com/Ebay/images/icons/mens_buttondown_black.png','http://www.lukasgraphics.com/vintageland/images/all_black.png','http://www.lukasgraphics.com/vintageland/images/all.png')"><table width="150" border="0" cellspacing="0" cellpadding="0">
        <td width="50"><a href="http://lukasgraphics.com/vintageland/?page_id=438" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('1990s_all','','http://www.lukasgraphics.com/vintageland/images/all_black.png',1)"><img id="1990s_all" src="http://www.lukasgraphics.com/vintageland/images/all_black.png"></a></td>
        <td width="50">&nbsp;</td>
        <td width="50">&nbsp;</td>

    The page is here (see sidebar):


    The “ERA: 1990s” icon should be expanded when opening the page but it is not. What am I doing wrong?


    Try adding colomat-expand-only to the trigclass attribute.

    in the CSS or the code I posted above? I don’t understand. I’m still learning.

    It would actually be in the shortcode. Add trigclass=”colomat-expand-only” to the shortcode declaration.

    What about just adding a red color to the arrows instead of replacing the arrows?

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘[Resolved] [Plugin: jQuery Collapse-O-Matic] replace arrow and text with own image’ is closed to new replies.