Question

I am using jQuery expander here http://plugins.learningjquery.com/expander but couldnt find how to add a custom class to the show more/less links.

There are some I would like blue and others I would like black. I tried adding the summaryClass definition but that didnt do anything.

Does anyone have any ideas how to add a custom class to individual links?

I have tried a couple of other expander plugins but this seems the best one I could find.

Answer 1

You can do this with CSS.

The Expander plugin places a link wrapped in a span with class read-more / read-less. So, some CSS to target that link…

<style type="text/css">
  #one .read-more a, #one .read-less a { color: black; }
  #two .read-more a, #two .read-less a { color: red; }
</style>
<div id="one" class="expandable">
   This expandable div will have a black [...]
</div>
<div id="two" class="expandable">
   This expandable div will have a red [...]
</div>

Hope this helps!