Question

I’m trying to show a “live” table of contents in a separate div, based on a source textarea. This involves hiding everything but h1,h2,h3,h4,h5,h6 tags. How would I do this? I tried several functions using .show() and .hide() on #toc elements, but it had no effect.

Can you point me in the right direction?

Here’s the jQuery I wrote, with my question in comments. This ‘working’ version is at http://jsfiddle.net/supertrue/vQvQE/

    // selector for the source textarea
    var textarea = $('textarea#source');
    // selector for the destination
    var destination = $('#toc');

    textarea.keyup(function() {

        destination.html( textarea.val() );

    });

    // now hide everything in #toc except h1,h2,h3,h4,h5,h6
    // How do I do this?

Answer 1

Josh’s CSS trick is pretty cool and I’d probably go with that. But, if you want to use jQuery (perhaps you want to mangle the HTML a little more on its way to #toc) then you’re better off looking for what you want rather than trying to get rid of what you don’t want:

source.keyup(function() {
    var html = '<div>' + source.val() + '</div>';
    var hs   = $(html).find('h1,h2,h3,h4,h5,h6');
    destination.empty().append(hs);
});

The <div> wrapper allow us to use find so that we don’t have to worry about filter and how deep in the DOM the headers are.

Demo: http://jsfiddle.net/ambiguous/EbkTZ/