Collapsible button doesn’t…collapse!

  • Resolved giannit

    (@giannit)


    5 years, 6 months ago

    Hi, I’d like to add to my (localhost) site a collapsible button with the following features (here you can see it in action):

    • button width has not to be 100%, but has to adapt to the text inside the button
    • button can be inserted in a line of text without forcing the words after the button to go to the next line (I tried the plugin collapse-o-matic but the words after the button, even if they are written in the same line, are forced to go to the next line)

    I was looking for how to manually (without plugins) create the button, and I ended up to a w3schools page where, using the online editor, I created the button I want (see link above) whose code is the following

    <!DOCTYPE html>
<html>
<head>
<style>
.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  border: none;
}

.ccontent {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: .3s ease-out;
  background-color: #f1f1f1;
  box-shadow: 5px 5px 10px 3px inset rgba(0,0,0,0.60);
}
</style>
</head>
<body>

Does <button class="collapsible">this</button> works?
<div class="ccontent"><p>Yes!</p></div>
Good job!

<script type="text/javascript">
var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    } 
  });
}
</script>

</body>
</html>

    Next I tried to figure out how to add the code to wordpress, so this is what I did

    • added .collapsible and .content to the style.css file
    • added the javascript to the footer using a plugin

    then in a post I wrote the following code

    Does <button class="collapsible">this</button> works?
<div class="ccontent"><p>Yes!</p></div>
Good job!

    but, while the button is correctly showing, when clicking on it nothing happens. Since the button is showing, I think the problem has to do with the javascript code.
    This is what it shown in my post, as you can see another problem is the blank space between the first line and the second.

    I’m almost sure that the javascript is loaded because when I open the page source (CTRL+U) I see that, some line before the </body> tag, the script is shown.

    • This topic was modified 5 years, 6 months ago by giannit.
    • This topic was modified 5 years, 6 months ago by giannit.
    • This topic was modified 5 years, 6 months ago by giannit.
    • This topic was modified 5 years, 6 months ago by giannit.
Viewing 7 replies - 1 through 7 (of 7 total)

  • Hi,

    when you check the browsers error console, it should tell you what code is failing. However, this is quite a bit of code for something that should be really simple using jQuery.

    See: https://jsfiddle.net/ronald/b8x123tc/ for an example.

    To add the code to your WordPress site “the proper way”, add the following code at the end of your child themes functions.php file, but before a closing ?>, if any:

    function my_footer_script() { ?>

    <script type="text/javascript">
    			
        jQuery(document).ready(function(){
            $('.collapsible').click(function() {
                $(this).next().slideToggle();
            }).next().hide();
        });
    		
    </script>

<?php
}

add_action('wp_print_footer_scripts', 'my_footer_script');
    Thread Starter giannit

    (@giannit)

    @ronaldvw Thank you very much! I’ve just solved the main problem, it was enought to edit the line
    var content = this.nextElementSibling;
    in
    var content = this.parentElement.nextElementSibling;

    Now I’m trying to remove the blank space.

    Your solution is very interesting, I added the code to the functions.php file before the closing ?>, then I removed the css code about .collapsible and .ccontent, and finally refresh the post page, problem is that when the page is loaded the content is already showing and button cannot be pressed.

    Moreover, in the console this error message appears
    Uncaught TypeError: $ is not a function and it says the problem is at line $('.collapsible').click(function() {

    Complete error message is

    Uncaught TypeError: $ is not a function ?preview_id=3389&preview_nonce=dd08c156ab&_thumbnail_id=-1&preview=true:190
    at HTMLDocument.<anonymous> (?preview_id=3389&preview_nonce=dd08c156ab&_thumbnail_id=-1&preview=true:190)
    at i (jquery.js?ver=1.12.4-wp:2)
    at Object.fireWith [as resolveWith] (jquery.js?ver=1.12.4-wp:2)
    at Function.ready (jquery.js?ver=1.12.4-wp:2)
    at HTMLDocument.J (jquery.js?ver=1.12.4-wp:2)
    • This reply was modified 5 years, 6 months ago by giannit.

    Hi,

    change the first line of the code to:

    jQuery(document).ready(function($){

    otherwise, this is hard to diagnose without being able to see this online. The jsfiddle I posted shows that the code works, provided that jQuery is loaded.

    • This reply was modified 5 years, 6 months ago by ronaldvw. Reason: removed tags from code
    Thread Starter giannit

    (@giannit)

    @ronaldvw Thank you for support, I changed the first line as you said, but the error did not go away. I tried replacing the two dollar signs with jQuery, in this way

            jQuery(document).ready(function(){
            jQuery('.collapsible').click(function() {
                jQuery(this).next().slideToggle();
            }).next().hide();
        });

    the errors are gone, but the button still doesn’t work as you can see from this video.

    I can’t debug a video, let me know when you have something online and I can have another look.

    Thread Starter giannit

    (@giannit)

    @ronaldvw Thank you ronald! Do you know if, using your method, it is possibile to put two elements in the same line, like it is shown in this image?

    Thread Starter giannit

    (@giannit)

    EDIT: wrong message

    • This reply was modified 5 years, 6 months ago by giannit.
Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Collapsible button doesn’t…collapse!’ is closed to new replies.