Grow your CSS skills. Land your dream job.

I have trouble writing functions for any ID

  • # June 24, 2014 at 8:48 pm

    I created a codepen showing what I need done about 3 times in a page. I used the actual “ID” name though; long form.

    The first thing I want to happen is the text to be hidden or displayed. The text on the button is an addition I added later.
    I will have 3 sections within the same page with a button displaying “Show” or “Hide” and some text will be hidden or displayed. I tried to write the actual function to use any ID and it failed. It works when I actually use the

    <

    div>’s id that contains the text to be hidden.

    Note: I am for the most part following an example in my course notes on how to write this.

    This is what I tried without the button text:

    function toggleDisplay(id)
    {
    var e = document.getElementById(id);
    e.style.visibility = “none”;

    if (e.style.display === "block")
    {
        e.style.display = "none";
    }
    else
    {
        e.style.display = "block";
    }
    

    }

    //bind the event handling functions
    document.getElementById(“showHide1″).onclick = toggleDisplay(“toggleMe1″);

    This does not work. I thought that I would only need to add the “var e = document.getElementById(id);” within the function and then when I call the function, I would add the id name.

    This is where I am having trouble when I need to write a function that you can pass any “Id” into it. I really don’t know if I am going to get javaScript.

    # June 24, 2014 at 10:16 pm

    See if this helps

    Let us know if you need further explanation.

    # June 24, 2014 at 11:04 pm

    Alen, I will have a look at your code tomorrow.

    Does your code keep the same space when hidden? I wanted the text to push down when it displays and then removes the space when it is hidden. In my example, the button moves back up to the paragraph when the other paragraphs get hidden again.

    I do not want to have blank spaces on my page.

    # June 25, 2014 at 1:11 am

    It would probably be better to use class names instead of id’s. Try this code (demo):

    //show and hide paragraphs in Deals page
    function toggleDisplay(button) {
        var hidden = button.parentNode.parentNode.querySelector('.hidden');
    
        hidden.style.visibility = "none";
        hidden.style.display = hidden.style.display === 'block' ? 'none' : 'block';
        button.innerHTML = button.innerHTML === 'Show' ? 'Hide' : 'Show';
    }
    
    //bind the event handling functions
    [].forEach.call( document.querySelectorAll('.showHide'), function(el) {
       el.addEventListener('click', function() {
         toggleDisplay(el);
      }, false); 
    });
    

    * Note: this code won’t work on older browsers

    # June 25, 2014 at 8:53 am

    I do not want to have blank spaces on my page.

    Modify toggleDisplay function and add el.style.display = 'block'; and el.style.display = 'none';

    Here’s our function now:

    
    function toggleDisplay(el) {
      if ( el.style.visibility === 'hidden') {
        el.style.visibility = 'visible';
        el.style.display = 'block';
      }
      else {
        el.style.visibility = 'hidden';
        el.style.display = 'none';
      }
    }
    

    In CSS (this bellow is not required for code to run, its for explanation purposes only)

    
    // hides element, does not maintain layout
    .hidden {
      display: none!important;
      visibility: hidden;
    }
    
    // hides element, maintains layout
    .invisible {
      visibility : hidden;
    }
    
    # June 25, 2014 at 8:24 pm

    Hi Alen.

    Thank you very much with your help.
    I have not used “addEventListener” very much yet and whenever I see the “el”, I forget what it means.

    I would like to confirm one thing. I have 3 buttons on one page. Each button hides/shows their own paragraph. Is it correct that I place an “addEventListener” for each one? This is what I did and it works. But, am I writing this long form again? Is there a shorter way? What happens if you have many buttons (not that you would probably)?

    This is what I did:

    var txt = document.getElementById(“toggleMe1″);
    var txt2 = document.getElementById(“toggleMe2″);
    btn = document.getElementById(“showHide1″);
    btn2 = document.getElementById(“showHide2″);

    //add event listener to our button
    btn.addEventListener(“click”, function()
    {
    toggleDisplay(txt);
    toggleButtonText(btn);
    })

    btn2.addEventListener(“click”, function()
    {
    toggleDisplay(txt2);
    toggleButtonText(btn2);
    })

    //function toggling visibility
    function toggleDisplay(el)
    {
    if ( el.style.display === “block”)
    {
    el.style.display = “none”;
    }
    else
    {
    el.style.display = “block”;
    }
    }

    //function to toggle text
    function toggleButtonText(el)
    {
    if (el.innerHTML === “Show”)
    {
    el.innerHTML = “Hide”;
    }
    else
    {
    el.innerHTML = “Show”;
    }
    }

    It works. When I click the first button, its paragraph that was hidden, displays. The second paragraph stays hidden. When I click the second button, its paragraph displays and the first paragraph stays as I left it.

    When I see the code written and I go through it, I understand it (eventually); but, when I try to write it on my own, often I struggle with it and need help. I never programmed before this course and now I know why.

    Once again, thanks for your help.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".