vendredi 22 juin 2018

triggering a function (JavaScript, jQuery), it should be simple

I have two functions. Notice the difference of first line in both functions defining when to trigger and execute. Both function are similiar, function#1 shows section which is not visible by default. Function#2 does pretty much same just in nicer way, it slides down and has nice animation.
Function #1:

function toggle_visibility(id) {
            var e = document.getElementById(id);
            if(e.style.display == 'block')
                e.style.display = 'none';
            else
                e.style.display = 'block';
        }

Function #2:

$('.toggleMUSIC').click(function(e) {
            e.preventDefault();

            var $this = $(this);

            if ($this.next().hasClass('showsection')) {
                $this.next().removeClass('showsection');
                $this.next().slideUp(200);
            } else {
                $this.parent().parent().find('li .inner').removeClass('showsection');
                $this.parent().parent().find('li .inner').slideUp(200);
                $this.next().toggleClass('showsection');
                $this.next().slideToggle(200);
            }
        });

Problem is, that function #2 trigers only button with class "toggleMUSIC", this gives me limit only to individual button with that class. Now I want to add more buttons with same behavior and unfortunately same class, that causes mess for the function and it doesnt work correctly because it has more than one element with class "toggleMUSIC".

Function #1 shows how I want it to be - triggeret by ID. I mark the ID of related div (this div will be hidden or shown) to the button element by this command to html code <a class="helper_button" onclick="toggle_visibility('helper1');"> . I am not sure if I use right terminology and if I have provided enough resources for my issue, if needed let me know.

Honestly, unbelievably I wrote these function by a miracle, trying and trying until it worked but it was long long time ago and unfortunately I did not understand that fully.

Attaching also HTML of both function for better better image. enter image description here

enter image description here




Aucun commentaire:

Enregistrer un commentaire