White Maskers White Maskers - 2 months ago 9
CSS Question

Is it possible to select multiple html elements with same class name with using java script?

I'm trying to create a menu, which have a speciality that the menu contain some icons with each menu title and one button also associated with the menu.when we click on that button every menu titles need to be hidden
and only the icons are need to be visible.to achieve this i give a common class name for each menu title and give a java script function. i will give it below.(i'm added the menu and java script function i'm used on below)

function hideSideMenu() {
document.getElementById("menu-title").style.display = "none";
}

<ul id="leftMenu" class="clearfix">
<li class="topmenu ltopmenu-display-event"><a href="http://qmsadm.local/dashboard"><span class="ico fa fa-fw fa-dashboard "></span><span id="menu-title" class="menu-title">Dashboard</span></a></li>
<li class="topmenu ltopmenu-display-event"><a href="javascript:void(0)"><span class="ico fa fa-fw fa-globe "></span><span id="menu-title" class="menu-title">Admin</span><span class="fa fa-chevron-right spinner-ico"></span></a>
<ul><li><a href="http://qmsadm.local/admin/users"><span class="ico fa fa-fw fa-users "></span>Users</a></li>
<li><a href="http://qmsadm.local/admin/roles"><span class="ico fa fa-fw fa-user-md "></span>Roles</a></li>
<li><a href="http://qmsadm.local/admin/menu"><span class="ico fa fa-fw fa-navicon "></span>Manage Menu</a></li>
<li><a href="http://qmsadm.local/admin/clients"><span class="ico fa fa-fw fa-pagelines "></span>Clients</a></li>
<li><a href="http://qmsadm.local/admin/templates"><span class="ico fa fa-fw fa-glass "></span>Templates</a></li>
<li><a href="http://qmsadm.local/admin/devreqs"><span class="ico fa fa-fw fa-cloud-upload "></span>Device Requests</a></li><li><a href="http://qmsadm.local/admin/devices"><span class="ico fa fa-fw fa-laptop "></span>Devices</a></li></ul></li><li class="topmenu ltopmenu-display-event"><a href="javascript:void(0)"><span class="ico fa fa-fw fa-puzzle-piece "></span><span id="menu-title" class="menu-title">App</span><span class="fa fa-chevron-right spinner-ico"></span></a><ul><li><a href="http://qmsadm.local/app/counters"><span class="ico fa fa-fw fa-ticket "></span>Counters</a></li>
<li><a href="http://qmsadm.local/app/displays"><span class="ico fa fa-fw fa-desktop "></span>Displays</a></li>
<li><a href="http://qmsadm.local/app/kiosks"><span class="ico fa fa-fw fa-hand-o-up "></span>Kiosks</a></li>
<li><a href="http://qmsadm.local/app/ads"><span class="ico fa fa-fw fa-film "></span>Ads</a></li><li><a href="http://qmsadm.local/app/category"><span class="ico fa fa-fw fa-star "></span>Category</a></li>
<li><a href="http://qmsadm.local/app/subcategory"><span class="ico fa fa-fw fa-star-half "></span>Sub Category</a></li></ul></li>
<li class="topmenu ltopmenu-display-event"><a href="javascript:void(0)"><span class="ico fa fa-fw fa-pie-chart "></span><span id="menu-title" class="menu-title">Reports</span><span class="fa fa-chevron-right spinner-ico"></span></a><ul><li><a href="http://qmsadm.local/reports/token/detail"><span class="ico fa fa-fw fa-th-large "></span>Token Detail</a></li><li><a href="http://qmsadm.local/reports/token/summary"><span class="ico fa fa-fw fa-envelope-o "></span>Token Summary</a></li>
<li><a href="http://qmsadm.local/reports/counter/detail"><span class="ico fa fa-fw fa-pencil-square-o "></span>Counter Detail</a></li>
<li><a href="http://qmsadm.local/reports/counter/summary"><span class="ico fa fa-fw fa-briefcase "></span>Counter Summary</a></li>
<li><a href="http://qmsadm.local/reports/regusers"><span class="ico fa fa-fw fa-dedent "></span>Registered Users</a></li>
<li><a href="http://qmsadm.local/reports/admin/activities"><span class="ico fa fa-fw fa-clipboard "></span>Admin Activities</a></li></ul>
</li>
<li class="topmenu ltopmenu-display-event"><a href="javascript:void(0)"><span class="ico fa fa-fw fa-gears "></span><span id="menu-title" class="menu-title">Settings</span><span class="fa fa-chevron-right spinner-ico"></span></a><ul><li><a href="http://qmsadm.local/settings/personal"><span class="ico fa fa-fw fa-columns "></span>Personal</a></li>
<li><a href="http://qmsadm.local/settings/language"><span class="ico fa fa-fw fa-bold "></span>Language</a></li>
<li><a href="http://qmsadm.local/settings/client"><span class="ico fa fa-fw fa-male "></span>Client</a></li></ul></li><li class="topmenu ltopmenu-display-event"><a href="javascript:void(0)"><span class="ico fa fa-fw fa-anchor "></span><span id="menu-title" class="menu-title">Super</span><span class="fa fa-chevron-right spinner-ico"></span></a>
<ul><li><a href="http://qmsadm.local/super/activities"><span class="ico fa fa-fw fa-pencil "></span>Activities</a></li></ul></li><ul></ul></li><ul></ul></li><ul></ul></li><ul></ul></li><ul></ul></li><ul></ul></li><ul></ul></li><ul></ul></li><ul></ul></li><ul></ul></li><ul></ul></li><ul></ul></li><ul></ul></li><ul></ul></li><ul></ul></li><ul></ul></li>

</ul>
</li>
</ul>


the problem with this script is that which is work for the first menu item only.i'm new on script ,so you may feel this as funny.is it possible to select all html elements with same class name using java script?.probably that may solve my problem...i don't like to use jquery..

i also tried this


document.getElementsByClassName("menu-title").style.display = "none";


but it's not working for me.

Answer

You can use document.querySelectorAll('.menu-title') or document.getElementsByClassName("menu-title"), but both return Arrays / Enumerables / Nodecollections. So you need to iterate them.:

var titles = document.querySelectorAll('.menu-title');
for( i in titles ) {
  titles[i].style.display = 'none';
}

The syntax you chose looks very jQuery inspired. In jQuery this would work similar, but jQuery internally maps Arrays and iterates them and applies the actions. Pure JS doesn't do this.

(You could use Array.forEach() as well on the Collection to achieve this)