Bookmarklet to change state of Confluence Expand Macro

Question

Using the Chrome browser (technically, Iron), I want to have a bookmarklet that will override the expand macro in Confluence (technically Atlassian Confluence 5.2.3), so that none of the sections are collapsed after using the bookmarklet.

Why? When I search in Confluence for a keyword that is behind the expand macro, an article will be identified in the search results with the keyword somewhere in the article, but when you navigate to the article, I can't find the word. So I perform a find in page (ctrl+f) for the word, and it doesn't appear. After I click on all the expand macro links, and try the find in page again, I am able to find my keyword.

Since I am no coder, I have done my best... using the code found here: Javascript debut - from Chrome console to a bookmarklet and using the I wrote the following:

javascript:void((function(){function getElementsByClassName(classname, node){if(!node) node = document.getElementsByTagName("body")[0]; var a = [];var re = new RegExp('\\b' + classname + '\\b'); var els = node.getElementsByTagName("*");for(var i=0,j=els.length; i<j; i++)if(re.test(els[i].className))a.push(els[i]);return a;};var elems = getElementsByClassName('ajs-content-hover');for (var i=0;i<elems.length;i+=1){elems[i].style.display = '';}})());

I believe the expand action is coming from a class named ajs-content-hover, on certain divs. I could be completely wrong about this. Why I think this is the class: I browsed to a page using the expand macro, used the Browser Developer Tools (ctrl-shift-I), went to the elements tab, clicked a link I know uses the expand macro - that was currently not expanded (that's the default behavior), and identified the following html: <div id="content-hover-1" class="ajs-content-hover" style="display: none;"><div class="contents" style="width: 300px;"></div></div>. I found multiple divs of this type, with different IDs, but the same class and the same style.

My first bookmarklet changed the style for the entire page, which is not what I wanted (resulted in a blank page). So I thought targeting the class might be appropriate, but that isn't working either.

Hopefully, this is sufficient explanation to demonstrate the problem, steps taken, motive (sometimes questioned on SO), and desired state. I am looking for an explanation that can get me to a working bookmarklet.

Answer 1

I solved this by taking advantage of the jQuery library that ships alongside Confluence. This allows you to easily target elements using CSS-selectors.

Also, if you haven't done so already, use the console in Chrome or use Firebug, to test your code.

When using the standard expand macro, the 'link' (really just a span) you click to expand the panel, has a class called expand-control.

Simply select all of the click targets using the class name, then call the 'click' event. All closed panels will be opened and all open panels will be closed.

javascript:$('.expand-control').click();