1

I have some buttons, each with a class of "fullscreen-button", that I intend to use to show/hide content on a page. The buttons all have id's that are names of school programs, and there are divs for each button on the page with classes that match the id's (a button with an id of "programming" and a corresponding div with a class of "programming", etc).

My goal now is to have it so when a button is clicked, a div with a class that matches the id of the clicked button is hidden by giving that div a class that is styled to display:none.

I've written out some jQuery that I would expect does this, but it only manages to work for the first button so I know I'm going wrong somewhere. This is what I have at this point...

    $('.fullscreen-button').each(function(i,elm) {
    programTitle = $(elm).attr("id");
        $(elm).click(function(){
            $('.program-collector div').each(function(j,pelm) {
                if ($(pelm).hasClass(programTitle)) {
                    $(pelm).addClass("hidden");
                }
            });
        })
    });

So, how do I actually loop through all of the buttons and divs properly?

Improve this question
2
  • 1
    If you could make a jsfiddle it makes it a lot easier to answer your questions. Commented Oct 6, 2015 at 20:42
  • It's hard to know what's wrong with only the JS but not the HTML it works on. Please add your HTML to the question (or better yet, create a fiddle as per @arcyqwerty's suggestion) Commented Oct 6, 2015 at 20:44

1 Answer 1

Reset to default
2

This should be the simple1 solution to your problem.

If an element with class fullscreen-button is clicked, then any elements matching .program-collector div.{button-id} will be hidden (where button-id is the id attribute of the clicked .fullscreen-button element).

Note that $(selector).hide() automatically applies display: none2

$('.fullscreen-button').click(function(){
    $('.program-collector div.' + $(this).attr('id')).hide();
});

1 I say simple because it will work for most sane web pages. You could theoretically have an id/class name that would cause issues for use in a jQuery selector and would need to be escaped.

2 http://api.jquery.com/hide/

Improve this answer
Sign up to request clarification or add additional context in comments.

11 Comments

Thank you very much for the insight. I just went and made a JSFiddle with whatever code was applicable. Your solution works when I replace my jQuery on the JSFiddle with yours with the exception of the Game Design button. Would spacing be an issue in this instance? I am also getting an unrecognized expression error in the console (unrecognized expression: .program-collector div.Acting For Television) and the functionality isn't working with the new code. Its a long shot, but I wonder if there's a simple enough fix to find based on that warning?
That's because "Game Design" is actually interpreted as two classes Game and Design. I'd recommend using a dash or other separator. So yes, it is a whitespace problem.
Cannot reproduce your console error. Are you running some different code? I see nothing mentioning "Television" in the fiddle.
Yeah, I'm actually working on a massive drupal site and much of the content is coming from rendered out field collections across different php pages. So I recreated the content I was working on to the best of my abilities but there is much more markdown than seen on my fiddle.
Anyhow, did the class-spacing issue resolve part of it?
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.