Trying to create accordions with javascript in Wordpress

Question

Hi I'm new at Javascript but am trying to use it to create an accordion in Wordpress. I'm using this exact code from W3:

http://www.w3schools.com/howto/howto_js_accordion.asp

The CSS works because I have an overwrite file plugin, the HTML I can do in the text tab of the page in wordpress. But the js isn't working. Currently the way it is set up is this:

Update: Here is the code in the wordpress page box:

<button class="accordion">Section 1</button>
<div class="panel">
<p>Lorem ipsum...</p>
</div>

Here is the code in my CSS file:

button.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
text-align: left;
border: none;
outline: none;
transition: 0.4s;
}

button.accordion.active, button.accordion:hover {
background-color: #ddd;
}

div.panel {
padding: 0 18px;
background-color: white;
display: none;
}

div.panel.show {
    display: block;
}

Here is the JS in my external file:

    function js_in_faq() {
        var acc = document.getElementsByClassName("accordion");
        var i;

        for (i = 0; i < acc.length; i++) {
            acc[i].onclick = function(){
                this.classList.toggle("active");
                this.nextElementSibling.classList.toggle("show");
            }
        }
}

I'm calling it by adding this in the header.php:

<script type="text/javascript" src="/js/bigjava.js"></script>

And then I added the JS to the wordpress page:

<script type="text/javascript">
js_in_faq();
</script>

I see my external jquery file that implemented by placing it in functions but thats it — Patricia Riordan, Nov 22 '16 at 15:43

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

Not long ago I was receiving an JavaScript error when trying to incorporate Google Maps, reference Q&A Why am I getting a Google Map JavaScript error in my WordPress theme? that might assist you as there are several ways you can go about doing this. You don't mention how you're calling your JS, wether in a file or not. If you wanted to call it at the bottom of the page you could use a conditional and call the hook wp_footer:

function js_in_footer() {
    <script type='text/javascript'>
        var acc = document.getElementsByClassName("accordion");
        var i;

        for (i = 0; i < acc.length; i++) {
            acc[i].onclick = function(){
                this.classList.toggle("active");
                this.nextElementSibling.classList.toggle("show");
            }
        }
    </script>
}
add_action( 'wp_footer', 'js_in_footer' );

but this would rely on knowing where your JS was being called. If you're wanting the JS in a file you would need to enqueue the file with something like:

function call_the_js_files() {  
        wp_enqueue_script( 'accordion_js', get_template_directory() . '/js/accordion.js', array( 'jquery' ), '', true );
    endif;
add_action( 'wp_enqueue_scripts', 'call_the_js_files' );

sample above code, but as mentioned you do not really state how you're calling the JS. Have a look at Using Javascript

Thanks Darth Vader. This helped a lot to get me on track. I'm still trying to figure it out but you pointed me in the right direction. I'm trying to call the JS with in the header.php and then the code you sent along in /bigjava.js and then in the wordpress page. It looks like something is responding since the colors are changing on accordions but I can't get them to open just yet — Patricia Riordan, Nov 23 '16 at 03:46
oh and to clarify i replaced "js_in_footer" with " js_in_faq" — Patricia Riordan, Nov 23 '16 at 03:48
If it helped please up vote the answer. If it answered your question please mark it as the accepted answer. If you still need help please make an edit to your question and Ill try to help further. — DᴀʀᴛʜVᴀᴅᴇʀ, Nov 23 '16 at 03:48
I gave it the upvote but I have less than 15 repuation so it won't display publically sorry! — Patricia Riordan, Nov 23 '16 at 03:56

Trying to create accordions with javascript in Wordpress

1 Answers1