Find String on Page (Ctrl+F) when jQuery Accordion in Use

Question

I am using jQuery accordion plugin to collapse a large page. It works nicely and is a great way to compact the page but I noticed that when using the Browser search function find (Ctrl+F) it only looks in the open div for the search string.

Is there a way to get the browser find to search through all the divs (and maybe even open them if found)... I see why this is not trivial. The search would have to open the divs to show results and this is not obvious...

If there isn't an obvious way to get around this, what would be the approach to doing this programatically?

Any ideas?

Answer 1

There is no easy solution for an accordion, which is designed around the concept that only one "flap" can be open at a time. But you can devise solutions that work if you get rid of that restriction.

For example,

$(document).on("keydown", function (e) { if (e.keyCode == 70 && e.ctrlKey) { ... } });

will allow you to trap Ctrlf and pre-emptively expand all your hidden text.

Another approach is not to actually hide your text at all, but make it very nearly invisible (very low opacity, or inside a height:1 div, or whatever does not block find but still effectively hides), and then trap the select event. Using whatever technique you prefer to find your position in the DOM (e.g. http://mark.koli.ch/2009/09/use-javascript-and-jquery-to-get-user-selected-text.html) you can then reactively expand the hidden section in which text was just selected.

If you do get it working, post back here with your results!

Here's a simple but straightforward alternative to accordions with which you can make the ctrl-f event trick work.

In your HTML you can structure it like so:

<div class="booklet">
   <h1>Header 1</h1>
   <div>Content in this flap</div>
   <h1>Header 2</h1>
   <div>Content in this flap</div>
   <h1>Header 3</h1>
   <div>Content in this flap</div>
</div>

Style the h1 elements to taste, ensure you give them things like cursor: pointer and the appropriate background-color to indicate that these are clickable, e.g.:

.booklet h1
{
   cursor:pointer;
   background-color:#3cf;
   color:white;
   border-top-left-radius:5px;
   border-top-right-radius:5px;
   padding:5px;
}
.booklet div
{
   display:none;
   border: 1px solid #3cf;
   border-bottom-left-radius:5px;
   border-bottom-right-radius:5px;
   padding:5px;
}

In your Javascript:

$('.booklet').on("click", "h1", function()
{
   $('.booklet div').hide();
   $(this).next("div").show(); // acts like accordion, animate to taste
});
$('.booklet div').first().show(); // open first flap of accordion to begin

$(document).on("keydown", function (e)
{
   if (e.keyCode == 70 && e.ctrlKey) // ctrl+f
   {
      $('.booklet div').show(); // show all flaps
   }
});

All the flaps will remain open until another header is clicked, when it will return to accordion behavior.

Answer 2

I went with this option, as described elsewhere:

Toggle Entire Accordion Functionality with Link or Button

I give the user an option to toggle the accordion all together and then they can search with Ctrl+F.