Toggle Button Text While Show/Hide Class Objects

1

Hi,

I would like to toggle my button text with “Show” and “Hide” while showing and hiding objects using class names. Here is what I have so far on the button click:

var elements = document.getElementsByClassName(‘bricks’);

for (var i = 0; i < elements.length; i++) {
    elements[i].style.display = elements[i].style.display == 'block' ? 'none' : 'block';
    
            

    }

show_class.hype.zip (16.1 KB)

2

@pugscanfly

Is this what You were thinking? show_class_JHSv1.hype.zip (14.5 KB)

var elements = document.getElementsByClassName('bricks');

var whatName = element;
if (whatName.innerHTML == "Hide") {whatName.innerHTML = "Show"} else {whatName.innerHTML = "Hide"}
   	
for (var i = 0; i < elements.length; i++) {
        elements[i].style.display = elements[i].style.display == 'block' ? 'none' : 'block';

        }
3 Likes
3

Hi Jim, yes this is perfect! Thank you so much. I’m a designer first so coding is fairly new to me. Love the awesome Hype community. Hopefully some day I will be able to help someone else out.

Thanks again!

Cheers,
Mo

1 Like