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?

  • 1
    If you could make a [jsfiddle](https://jsfiddle.net) it makes it a lot easier to answer your questions. – arcyqwerty Oct 06 '15 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) – blurfus Oct 06 '15 at 20:44

1 Answers1

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/

arcyqwerty
  • 10,325
  • 4
  • 47
  • 84
  • Thank you very much for the insight. I just went and made a [JSFiddle](https://jsfiddle.net/79yay958/2/) 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? –  Oct 06 '15 at 21:14
  • 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. – arcyqwerty Oct 06 '15 at 21:16
  • Cannot reproduce your console error. Are you running some different code? I see nothing mentioning "Television" in the fiddle. – arcyqwerty Oct 06 '15 at 21:17
  • 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. –  Oct 06 '15 at 21:21
  • Anyhow, did the class-spacing issue resolve part of it? – arcyqwerty Oct 06 '15 at 21:24
  • Yes, and thanks again, but removing spaces from classed objects in the site will be much more challenging as the class names are rendered out from field collection data. I am wondering if I would run into the same issue if I used id's instead of classes? –  Oct 06 '15 at 21:36
  • You will because the selectors I'm using won't handle spaces in ids. You could potentially use `[class="Game Design"]` as a workaround with the caveat that the class attribute must match "Game Design" exactly. https://jsfiddle.net/79yay958/3/ – arcyqwerty Oct 06 '15 at 21:38
  • Also, you really shouldn't use spaces in ids either: http://stackoverflow.com/a/79022/1059070 – arcyqwerty Oct 06 '15 at 21:40
  • One more question before I'm back to the drawing board: I notice in the console that the classes in question have "." instead of spaces in the little yellow dialog box that comes up when you hover over an object, so "Game Design" becomes "element.Game.Design". I'm wondering now if I switched the ids into classes if the dom would read the classes of the corresponding objects the same way (with "."s and not spaces) and if that might solve the problem? Anyway, thanks again for all the help. –  Oct 06 '15 at 21:46
  • Yes. `element` selects a DOM element with tag `element` (i.e. ``). `.Game` is a selector for a DOM element with class `Game` and similarly `.Design` is a selector for a DOM element with class `Design`. `element.Game.Design` refers to a DOM element whose tag name is `element` with the classes `Design` and `Game` on it (i.e. ``) -- I purposely give "Design Game" in the example because classes are unordered as far as selectors go and "Design Game" has the same meaning as "Game Design" in a class attribute. – arcyqwerty Oct 06 '15 at 21:51
  • That also means that `element.Game.Design` is the same as `element.Design.Game` – arcyqwerty Oct 06 '15 at 21:52