JQuery: How to change CSS of elements that are with a certain element in one group


Tags: jquery,css

Problem :

I would like to know how I could change the CSS of all the <li> tags within <ul class='dropdown-menu'> that has the <a href='' class='dropdown-toggle about-header'> using JQuery? Please help me.

<ul class="nav navbar-nav">
  <li class="dropdown">
    <a href="javascript:return false" class="dropdown-toggle about-header" data-toggle="dropdown"><span class="icon-info"></span> About the Province</a>
    <ul class="dropdown-menu">
     <li><a href="javascript:return false" class="demographics">Demographics</a></li>
     <li><a href="javascript:return false" class="other">Other Info</a></li>
     <li><a href="javascript:return false" class="about">About the <span class='demonym'></span></a></li>
     <li><a href="javascript:return false" class="lgu">Local Government Unit</a></li>
    </ul>
   </li>
   <li class="dropdown">
    <a href="javascript:return false" class="dropdown-toggle update-header" data-toggle="dropdown"><span class="icon-refresh"></span> Provincial Updates</a>
    <ul class="dropdown-menu">
      <li><a href="javascript:return false" class="news">News</a></li>
      <li><a href="javascript:return false" class="event">Events</a></li>
    </ul>
   </li>


Solution :

do you want to find all the <li> tags within <ul class='dropdown-menu'> that has <a href='' class='dropdown-toggle about-header'> preceding it?

If so, this will work: 'a.about-header ~ ul.dropdown-menu li'

To break down the pseudo selector,

  • a = find a link
  • .about-header = that has the "about-header" class
  • ~ = get that element's next sibling
  • ul but only if it's an unordered list
  • .dropdown-menu = that has the class "dropdown-menu"
  • li return all the list items contained in the matched element

$('.dropdown-toggle').click(function(){ 

  var clas = $(this).attr('class').split(' ')[1]; 
  
  $('.'+clas+' ~ ul.dropdown-menu li').toggle();  // using toggle here lets a second click on the element re-hide the `li`s 
  
  // $('.'+clas).next('.dropdown-menu').find('li').toggle();  // you could also do it this way
  
  // $('.'+clas+' ~ ul.dropdown-menu li').`.css({ visibility : 'visible', display : 'block' });

});
ul.dropdown-menu li{
    display:none;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="dropdown">
    <a href="#" class="dropdown-toggle about-header" data-toggle="dropdown"><span class="icon-info"></span> About the Province</a>
    <ul class="dropdown-menu">
     <li><a href="#" class="demographics">Demographics</a></li>
     <li><a href="#" class="other">Other Info</a></li>
     <li><a href="#" class="about">About the <span class='demonym'></span></a></li>
     <li><a href="#" class="lgu">Local Government Unit</a></li>
    </ul>
   </li>
   <li class="dropdown">
    <a href="#" class="dropdown-toggle update-header" data-toggle="dropdown"><span class="icon-refresh"></span> Provincial Updates</a>
    <ul class="dropdown-menu">
      <li><a href="#" class="news">News</a></li>
      <li><a href="#" class="event">Events</a></li>
    </ul>
   </li>


    CSS Howto..

    How do I set the width and height of a textarea using CSS?

    How do I center bootstrap's carousel? Not the images, the carousel itself

    How to stretch image in img tag larger than its natural size?

    How to get rid of !important tags?

    how to make sure that that grid layout row adjusts the height automatically as per content

    How do you choose when to use DIV and when SPAN, to wrap something?

    How to center div using JQuery or CSS

    How to know where to use css, less and Sass? [closed]

    W3.CSS how to make container centered inside another container

    How do I make an erasing animation in CSS? [closed]

    How do I add curved corners to menu in css

    CSS How to set div height 100% minus nPx

    How to get alternate colors div with pure css and with IE 7 support?

    How can I show entered password using tooltip on input type=password in bootstrap?

    How can I exclude some images from being preloaded

    How to make the bootstrap button,when clicked to redirect to a specific page

    How to remove that ugly border in my link with a background image?

    how to combine multiple css class selectors into one?

    HTML5 - Show Items Side By Side

    How do I assign an external CSS file to a javascript-constructed SVG object?

    How to edit CSS so button appears on same line as input field?

    How to centre text as CSS content attribute vertically and horizontally?

    How to change all CSS file into SCSS

    how to display data in html

    How do I alter this HTML/CSS to make the container expand horizontally to the floated children?

    how does CSS determine which way to animate a transition?

    how to write a css that only can be visible on desktop in bootstrap

    How to make CSS triangles (with borders) compatible across browsers

    How do I vertically align multiple text next to an image with CSS?

    How to make divs appear and disapear on hover in css?