# Show / Hide elements with Select Dropdown and HTML data attributes \[SOLVED\] **URL:** \ **Category:** General\ **Created:** [March 21, 2018, 7:09am UTC](https://forum.freecodecamp.org/t/show-hide-elements-with-select-dropdown-and-html-data-attributes-solved/180845 "2018-03-21T07:09:56Z")\ **Posts on this page:** 11\ **Page:** 1
**Author:** ![JackEdwardLyons](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jackedwardlyons/32/158616_2.png) [@JackEdwardLyons](https://forum.freecodecamp.org/u/JackEdwardLyons)\ **Post date:** [March 21, 2018, 7:09am UTC](https://forum.freecodecamp.org/t/show-hide-elements-with-select-dropdown-and-html-data-attributes-solved/180845/1 "2018-03-21T07:09:57Z")
Hi all, I am trying to solve a problem, where I am not allowed to use ID / CLASS selectors but must use data attributes. I need to show and hide elements based on the selection from a drop down. The catch is that there are some items that can be shown alongside other elements, and some that are strictly to be shown alone / with specific elements. I have created a Pen to make it easier to understand: [https://codepen.io/JackEdwardLyons/pen/QQWXYP?editors=1001](https://codepen.io/JackEdwardLyons/pen/QQWXYP?editors=1001) Basically, if the data attribute has ‘OR’ then you can show one element or the other (within the data attribute list). If the data attribute has ‘AND’ then it must show the selected item AND the other element in the data attribute list. I hope this makes sense. I am like 80% there, but I know my logic is a bit dodgy and would love to find a cleaner solution! Thanks 🙂 ---
**Author:** ![JackEdwardLyons](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jackedwardlyons/32/158616_2.png) [@JackEdwardLyons](https://forum.freecodecamp.org/u/JackEdwardLyons)\ **Post date:** [March 21, 2018, 7:35am UTC](https://forum.freecodecamp.org/t/show-hide-elements-with-select-dropdown-and-html-data-attributes-solved/180845/3 "2018-03-21T07:35:56Z")
Yeah that’s correct 🙂 ---
**Author:** ![JackEdwardLyons](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jackedwardlyons/32/158616_2.png) [@JackEdwardLyons](https://forum.freecodecamp.org/u/JackEdwardLyons)\ **Post date:** [March 21, 2018, 7:53am UTC](https://forum.freecodecamp.org/t/show-hide-elements-with-select-dropdown-and-html-data-attributes-solved/180845/5 "2018-03-21T07:53:26Z")
Hey thanks for the response. If it just has one item in the data attribute list, then only that one should show. If it has ‘OR’ then show the element if the selected value from the dropdown list is either / or. If it has ‘AND’ then show the elements that have the selected value. I know its confusing… my logic is wonky, perhaps there is a better way to do it? ---
**Author:** ![JackEdwardLyons](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jackedwardlyons/32/158616_2.png) [@JackEdwardLyons](https://forum.freecodecamp.org/u/JackEdwardLyons)\ **Post date:** [March 21, 2018, 7:58am UTC](https://forum.freecodecamp.org/t/show-hide-elements-with-select-dropdown-and-html-data-attributes-solved/180845/6 "2018-03-21T07:58:06Z")
I realise this example is a bit contrived and not the real thing, but close to what I am trying to achieve. Sorry if it doesn’t make sense! ---
**Author:** ![JackEdwardLyons](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jackedwardlyons/32/158616_2.png) [@JackEdwardLyons](https://forum.freecodecamp.org/u/JackEdwardLyons)\ **Post date:** [March 21, 2018, 10:57am UTC](https://forum.freecodecamp.org/t/show-hide-elements-with-select-dropdown-and-html-data-attributes-solved/180845/8 "2018-03-21T10:57:45Z")
I thought I answered your reply above? Sorry, there is probably a better way to do this, but I’m stumped! ---
**Author:** ![JackEdwardLyons](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jackedwardlyons/32/158616_2.png) [@JackEdwardLyons](https://forum.freecodecamp.org/u/JackEdwardLyons)\ **Post date:** [March 22, 2018, 1:48am UTC](https://forum.freecodecamp.org/t/show-hide-elements-with-select-dropdown-and-html-data-attributes-solved/180845/10 "2018-03-22T01:48:23Z")
Ok, I have solved the issue using a JSON object in the data attribute for the select field and for each DOM element. Here is the full example, as you can see the HTML is hard to read cause its all auto generated with PHP. But The JS logic is hopefully a bit more readable. I didn’t know this, but data attributes can hold objects and arrays! On the select element I created a data attribute to hold a JSON object, like so: `data-dynamic-content='{ "http_basic": "standard_login", "matrix": { "0": "standard_login", "1": "matrix_message" }, "oauth": "oauth_login", "oauth2": "oauth2_login", "digest": "standard_login" }'` Then on each element that requires toggling, I add another data attribute, like so: `data-show-if="standard-login"` And then I check for the clicked select option, and if there are more than one items to show, I can loop through them and show the right ones! Here’s the working demo: [https://codepen.io/JackEdwardLyons/pen/QQWXYP?editors=1011](https://codepen.io/JackEdwardLyons/pen/QQWXYP?editors=1011) ---
**Author:** ![J\_RO](https://avatars.discourse-cdn.com/v4/letter/j/f9ae1b/32.png) [@J\_RO](https://forum.freecodecamp.org/u/J_RO)\ **Post date:** [March 23, 2018, 8:34am UTC](https://forum.freecodecamp.org/t/show-hide-elements-with-select-dropdown-and-html-data-attributes-solved/180845/11 "2018-03-23T08:34:49Z")
Cool example of how data-attributes could be used! Thanks for posting the working example. I’m a beginner when it comes to javascript but since you’re already working with jQuery wouldn’t another solution be to use [attribute selectors](http://api.jquery.com/category/selectors/attribute-selectors/) and look for ‘keywords’ within the ID’s? ---
**Author:** ![JackEdwardLyons](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jackedwardlyons/32/158616_2.png) [@JackEdwardLyons](https://forum.freecodecamp.org/u/JackEdwardLyons)\ **Post date:** [March 23, 2018, 8:54am UTC](https://forum.freecodecamp.org/t/show-hide-elements-with-select-dropdown-and-html-data-attributes-solved/180845/12 "2018-03-23T08:54:05Z")
Yes, you’re totally correct. The “usual” way to do this would just be to use ID selectors. But I needed this to be a bit more flexible, as there would be multiple items that show at the same time. Plus I wasn’t allowed to use ID selectors because this needed to be a function that was easily reuseable across the codebase. A good tip to remember every time you build something ---- Ask yourself, how reuseable is this code? Does it totally depend on specific DOM elements, or can I build this function so it works with any DOM element 🙂 ---
**Author:** ![J\_RO](https://avatars.discourse-cdn.com/v4/letter/j/f9ae1b/32.png) [@J\_RO](https://forum.freecodecamp.org/u/J_RO)\ **Post date:** [March 23, 2018, 9:15am UTC](https://forum.freecodecamp.org/t/show-hide-elements-with-select-dropdown-and-html-data-attributes-solved/180845/13 "2018-03-23T09:15:44Z")
> Does it totally depend on specific DOM elements, or can I build this function so it works with any DOM element? At this point I’m just happy to get things working ( 🤭 ) but you make an excellent point. _Also just saw your roadtrip app and now I really can’t wait to get started with vue, stay awesome!_ ---
**Author:** ![JackEdwardLyons](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jackedwardlyons/32/158616_2.png) [@JackEdwardLyons](https://forum.freecodecamp.org/u/JackEdwardLyons)\ **Post date:** [March 26, 2018, 4:00am UTC](https://forum.freecodecamp.org/t/show-hide-elements-with-select-dropdown-and-html-data-attributes-solved/180845/14 "2018-03-26T04:00:16Z")
Thanks for checking it out!! Also here is another method that works with data attributes, much simpler as well. [https://jsfiddle.net/rny3ncow/22/](https://jsfiddle.net/rny3ncow/22/) ---
**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\ **Post date:** [January 16, 2021, 5:58pm UTC](https://forum.freecodecamp.org/t/show-hide-elements-with-select-dropdown-and-html-data-attributes-solved/180845/15 "2021-01-16T17:58:27Z")
Closed on January 16, 2021, 5:58pm UTC