Button to toggle all divs of certain class (pure javascript, or loading after jquery)?

Question

I'm trying to insert a toggle button into a wordpress page that will change the state of all divs of class "foo".

Is there either a pure javascript way to do this, or some way of guaranteeing the js will load after the jquery.js loads? I don't really want to deal with trying to figure out how wordpress loads javascript and enqueuing files in the proper order or whatever, this should be 3 lines of javascript that is only needed on this one page.

My HTML / javascript knowledge is minimal, so please include the full code needed.

More details: There is jquery in my theme, however if I try to use the $(".CLASSNAME").toggle() syntax, I get

"Uncaught TypeError: undefined is not a function"

Which I assume is something to do with my "page" javascript being loaded before jquery is loaded.

I tried various things, like

CSS

.excerpt{
 style="display: none"
}

HTML

<input type="submit" value="Show/Hide Excerpts" onclick="toggleDiv();"></input>

<div class="excerpt">text i want to toggle</div>

Javascript, inside "script" HTML tag

$(document).ready(function toggleDiv() {
$(".excerpt").toggle();
}  )

This results in the aforementioned "Uncaught TypeError: undefined is not a function"

This looks promising, but I'm not quite sure how to tweak it to toggle / be linked to a button: https://stackoverflow.com/a/5836870/851192

For the gory details, This is Wordpress 4.0.1, TwentyFourteen Theme, on a page created with the W4 Post List plugin.

I've been at this for three hours :/ Sigh.

just seems jquery is not implemented correctly on your page. do you have the file included in your head section? — oshell, Feb 03 '15 at 12:48
Try using jQuery instead of using $. jQuery(document).ready( .... and not $(document).ready — Shoaib Chikate, Feb 03 '15 at 12:48
`.excerpt{ display: none }` this is the valid CSS syntax. Then to use jQuery, you would need to use `jQuery` or pass explecitely `$`. There are many many tutos regarding this. e.g: `function toggleDiv(){jQuery('.excerpt').toggle();});` — A. Wolff, Feb 03 '15 at 12:51
One last thing, `submit` input generally submit a FORM which cause redirection or refresh the page. Your question is quite unclear indeed — A. Wolff, Feb 03 '15 at 12:59
fyi, jquery implemented proper, again due to the wordpress / plugin specific setup here, my js file is loaded before jquery so I cannot use jquery functions -- i was trying to "wait until after jquery is loaded" but whatever I got from google did not work. I'm sure the submit came from some other answer on the internet, I ended up implementing with a button. Yep, my attempt at remembering what I tired had some dumb errors. Sorry that my example was confusing, but I think my desired behaviour was stated clearly in the title. Thanks all — orangenarwhals, Feb 06 '15 at 23:09

score 1 · Answer 1 · edited May 23 '17 at 11:49

This should work for you (I modified this a bit: https://stackoverflow.com/a/5836870/851192):

Javascript:

function toggleDiv() {
    var divs = document.getElementsByTagName('div');

    var toggle = function() {    
        for (var i = 0, l = divs.length; i < l; i++) {
            if (divs[i].getAttribute('class') == 'excerpt') 
                if (divs[i].style.display == 'none') divs[i].style.display = '';
                else divs[i].style.display = 'none';
        }
    }
}

HTML:

<input type="submit" value="Show/Hide Excerpts" onclick="toggleDiv();"></input>
...
<div class="excerpt">...</div>

Note that you do not need the class excerpt defined in CSS at all. All the Javascript code needs is that all the divs you want toggled are marked with this class:

  if (divs[i].getAttribute('class') == 'excerpt')

If the div is of class excerpt, then this toggles the display style:

  if (divs[i].style.display == 'none') divs[i].style.display = '';
    else divs[i].style.display = 'none';

Thanks! The CSS was an attempt to make it start out in a hidden state. But yea, I ended up adding it straight to the div instead. — orangenarwhals, Feb 04 '15 at 08:22

score 1 · Answer 2 · answered Feb 03 '15 at 13:00

Probably, it is due to WordPress loads in "no conflict" mode.

http://codex.wordpress.org/Function_Reference/wp_enqueue_script#jQuery_noConflict_wrappers

jQuery noConflict wrappers

Note: The jQuery library included with WordPress loads in "no conflict" mode. This is to prevent compatibility problems with other javascript libraries that WordPress can load.

In "no-confict" mode, the $ shortcut is not available and the longer jQuery is used. For example:

$(document).ready(function(){
$(#somefunction) ...
});

Becomes:

jQuery(document).ready(function(){
jQuery(#somefunction) ...
});

SOLUTION

Use jQuery instead of $.

function toggleDiv(){
  jQuery('.excerpt').toggle();
}

That is very useful to know! I will try this when I have some free time -- I ended up solving it by using pure javascript. I am also confused when sometimes at the end of a script example they put (jQuery) -- I can't find the examples anymore, and it's very hard to search for "(jquery)", but do you know what this is used for? Thank you! — orangenarwhals, Feb 04 '15 at 08:03

score 1 · Answer 3 · answered Feb 03 '15 at 13:09

Include your jQuery reference first then include your jQuery code in an IIFE (Immediately Invoke Function Expression) like this:

<script src='jquery/location'></script>
<script src='myscript/location'></script>

The IIFE should look like this:

(function($){
    $('.excerpt').toggle();
})(jQuery)

Both of these script tags should be the last tags before your closing </body> tag. This way your content is loaded and the use does not have to wait for your scripts to load before he/she sees the content. If you need the elements hidden on load (i.e. you try it and the elements are visible when the page load and then are hidden) then you should apply a CSS style and use jQuery's toggleClass() method to hide/show or apply display:none; directly to the element and use toggle() when you want to show the item.

.hidden{
    display:none;
}

The other problem you are going to have is your input type is submit which with trigger a POST (or GET). This does not look like what you want to do so you should use a button tag with the type=button.

Bind an click event in jQuery:

$('#toggle').on('click', function(){
    $('.excerpt').toggleClass('hidden');
});

Here a Fiddle: http://jsfiddle.net/24xfa0sL/1/

I could not include it first due to this very specific wordpress plugin setup situation. Thanks! — orangenarwhals, Feb 06 '15 at 22:53

orangenarwhals · Accepted Answer · 2015-02-06T23:10:36.297

I haven't dug through the responses yet, thanks for all of them. upvotes for everyone on the mythical day I get 15 points. Sorry for my not-perfectly-edited question, I was ready to go to sleep at that point.

I ended up figuring it out based on this jsfiddle: http://jsfiddle.net/robert/PkHYf/

HTML

<button id="Toggle">Show/Hide Excerpts</button>
[...stuff...]
<div class="excerpt" style="display:none;">
<ul style="margin:0 0 5px 20px;">[excerpt wordlimit=20] </ul></div>

JS

var divs = document.getElementsByTagName('div');

var toggle = function() {    
    for (var i = 0, l = divs.length; i < l; i++) {
        if (divs[i].getAttribute('class') == 'excerpt') 
            if (divs[i].style.display == 'none') divs[i].style.display = '';
            else divs[i].style.display = 'none';
    }
}

document.getElementById('Toggle').onclick = toggle;

picture of before/after button clicking to clarify desired behavior

Button to toggle all divs of certain class (pure javascript, or loading after jquery)?

4 Answers4