Toggle class based on the open status of a div element

Question

Toggle class based on the open status of a div element

I am working on some HTML code that utilizes the following jQuery script:

<nav class="navigation">
    <ul>
        <li class="has-sub">iPad <i class="fa fa-angle-down"></i>
            <ul class="sub-menu">
                <li><a href="iPadAir2.php">iPad Air 2 Review</a></li>
                <li><a href="iPadAir.php">iPad Air Review</a></li>
                <li><a href="iPadMini2.php">iPad mini 2 Review</a></li>
            </ul>
        </li>
        <li class="has-sub">iPhone <i class="fa fa-angle-down"></i>
            <ul class="sub-menu">
                <li><a href="iPhone6.php">iPhone 6 Review</a></li>
                <li><a href="iPhone5s.php">iPhone 5s Review</a></li>
                <li><a href="iPhone5c.php">iPhone 5c Review</a></li>
                <li><a href="iPhone5.php">iPhone 5 Review</a></li>
                <li><a href="iPhone4s.php">iPhone 4s Review</a></li>
            </ul>
        </li>
        <li class="has-sub">Mac <i class="fa fa-angle-down"></i>
            <ul class="sub-menu">
                <li><a href="MacBook.php">MacBook Review</a></li>
                <li><a href="MacBookProRetina.php">MacBook Pro w/ Retina display Review</a></li>
                <li><a href="MacBookPro.php">MacBook Pro Review</a></li>
                <li><a href="MacBookAir.php">MacBook Air Review</a></li>
            </ul>
        </li>
    </ul>
</nav>

$(document).ready(function() {
    $(".has-sub").click(function() {
        $(this).find(".sub-menu").slideToggle(500);
        $(this).parent().children(".has-sub").not(this).find(".sub-menu").slideUp(500);
    });
});

In this code snippet, the `i` element has a class of fa-angle-down. When clicked, the corresponding `li` item expands. However, I want to modify it by removing the fa-angle-down class and replacing it with fa-angle-up. Can someone provide me with guidance on how to achieve this?

Thank you.

CSS for the navigation menu is provided below:

nav {
    background : #034893;
    height : 50px;
}

nav ul,
nav li,
nav a { 
    margin : 0; 
    padding : 0;
}

nav > ul > li {
    color : white;
    display : block;
    float : left;
    font-size : 18px;
    line-height : 50px;
    position : relative;
    transition : all .3s linear;
    width : 25%;
    z-index : 999;
}

nav > ul > li:hover {
    background : #88bffc;
    color : #333;
    cursor : pointer;
}

nav > ul > li > ul {
    background : #034893;
    left : 0;
    margin : 0 auto;
    position : absolute;
    right : 0;
    text-align : left;
}

nav ul ul a {
    color : white;
    display : block;
    font-size : 14px;
    padding : 6px 12px;
}

nav ul ul a:hover {
    background : #88bffc;
}

jquery html css

Answer 1

Answer №1

UPDATED I have verified that the classes are toggling correctly in the DOM. The modification made was to initially toggle the .fa class, which switches between the down and up arrows for the clicked menu item.

$(".has-sub").click(function(e) {
    e.preventDefault;
    $this = $(this);
    $this.find(".sub-menu").slideToggle(500);
    $this.siblings(".has-sub").not(this).find(".sub-menu").slideUp(500);
    $this.find(".fa").toggleClass('fa-angle-down fa-angle-up');
    $this.siblings(".has-sub").not(this).find(".fa-angle-up").toggleClass('fa-angle-up fa-angle-down');
});

Answer 2

UPDATED I have verified that the classes are toggling correctly in the DOM. The modification made was to initially toggle the .fa class, which switches between the down and up arrows for the clicked menu item.

$(".has-sub").click(function(e) {
    e.preventDefault;
    $this = $(this);
    $this.find(".sub-menu").slideToggle(500);
    $this.siblings(".has-sub").not(this).find(".sub-menu").slideUp(500);
    $this.find(".fa").toggleClass('fa-angle-down fa-angle-up');
    $this.siblings(".has-sub").not(this).find(".fa-angle-up").toggleClass('fa-angle-up fa-angle-down');
});

Answer 3

Answer №2

When incorporating an anchor tag <a> for a purpose other than navigation, remember to utilize preventDefault();. The fa-angle-down class was mistakenly applied to an italicized <i> element instead of the intended list item <li>. It appears to create an accordion effect, am I correct? Toggling the required classes on and off is accomplished using toggleClass. If the links are meant to lead to actual destinations, make sure to comment out the e.preventDefault();

$(document).ready(function() {

  $(".has-sub").click(function(e) {
    // e.preventDefault();

    $(this).find(".sub-menu").slideToggle(500);
    $(this).parent().children(".has-sub").not(this).find(".sub-menu").slideUp(500);
    $('.fa').not(this).removeClass('fa-angle-down').addClass('fa-angle-up');
    $(this).find('.fa').toggleClass('fa-angle-down fa-angle-up');

  });
});

nav {
  background: #034893;
  height: 50px;
}
nav ul,
nav li,
nav a {
  margin: 0;
  padding: 0;
}
nav > ul > li {
  color: white;
  display: block;
  float: left;
  font-size: 18px;
  line-height: 50px;
  position: relative;
  transition: all .3s linear;
  width: 25%;
  z-index: 999;
}
nav > ul > li:hover {
  background: #88bffc;
  color: #333;
  cursor: pointer;
}
nav > ul > li > ul {
  background: #034893;
  left: 0;
  margin: 0 auto;
  position: absolute;
  right: 0;
  text-align: left;
}
nav ul ul a {
  color: white;
  display: block;
  font-size: 14px;
  padding: 6px 12px;
}
nav ul ul a:hover {
  background: #88bffc;
}
.fa.fa-angle-up:before {
  content: '\f106 ';
}
.fa.fa-angle-down:before {
  content: '\f107 ';
}

<link href="http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<meta charset="utf-8">
<nav class="navigation">
  <ul>
    <li class="has-sub"><i class="fa fa-angle-up">iPad</i>
      <ul class="sub-menu">
        <li><a href="iPadAir2.php">iPad Air 2 Review</a>
        </li>
        <li><a href="iPadAir.php">iPad Air Review</a>
        </li>
        <li><a href="iPadMini2.php">iPad mini 2 Review</a>
        </li>
      </ul>
    </li>
    <li class="has-sub"><i class="fa fa-angle-up">iPhone</i>
      <ul class="sub-menu">
        <li><a href="iPhone6.php">iPhone 6 Review</a>
        </li>
        <li><a href="iPhone5s.php">iPhone 5s Review</a>
        </li>
        <li><a href="iPhone5c.php">iPhone 5c Review</a>
        </li>
        <li><a href="iPhone5.php">iPhone 5 Review</a>
        </li>
        <li><a href="iPhone4s.php">iPhone 4s Review</a>
        </li>
      </ul>
    </li>
    <li class="has-sub"><i class="fa fa-angle-up">Map</i>
      <ul class="sub-menu">
        <li><a href="MacBook.php">MacBook Review</a>
        </li>
        <li><a href="MacBookProRetina.php">MacBook Pro w/ Retina display Review</a>
        </li>
        <li><a href="MacBookPro.php">MacBook Pro Review</a>
        </li>
        <li><a href="MacBookAir.php">MacBook Air Review</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

Answer 4

When incorporating an anchor tag <a> for a purpose other than navigation, remember to utilize preventDefault();. The fa-angle-down class was mistakenly applied to an italicized <i> element instead of the intended list item <li>. It appears to create an accordion effect, am I correct? Toggling the required classes on and off is accomplished using toggleClass. If the links are meant to lead to actual destinations, make sure to comment out the e.preventDefault();

$(document).ready(function() {

  $(".has-sub").click(function(e) {
    // e.preventDefault();

    $(this).find(".sub-menu").slideToggle(500);
    $(this).parent().children(".has-sub").not(this).find(".sub-menu").slideUp(500);
    $('.fa').not(this).removeClass('fa-angle-down').addClass('fa-angle-up');
    $(this).find('.fa').toggleClass('fa-angle-down fa-angle-up');

  });
});

nav {
  background: #034893;
  height: 50px;
}
nav ul,
nav li,
nav a {
  margin: 0;
  padding: 0;
}
nav > ul > li {
  color: white;
  display: block;
  float: left;
  font-size: 18px;
  line-height: 50px;
  position: relative;
  transition: all .3s linear;
  width: 25%;
  z-index: 999;
}
nav > ul > li:hover {
  background: #88bffc;
  color: #333;
  cursor: pointer;
}
nav > ul > li > ul {
  background: #034893;
  left: 0;
  margin: 0 auto;
  position: absolute;
  right: 0;
  text-align: left;
}
nav ul ul a {
  color: white;
  display: block;
  font-size: 14px;
  padding: 6px 12px;
}
nav ul ul a:hover {
  background: #88bffc;
}
.fa.fa-angle-up:before {
  content: '\f106 ';
}
.fa.fa-angle-down:before {
  content: '\f107 ';
}

<link href="http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<meta charset="utf-8">
<nav class="navigation">
  <ul>
    <li class="has-sub"><i class="fa fa-angle-up">iPad</i>
      <ul class="sub-menu">
        <li><a href="iPadAir2.php">iPad Air 2 Review</a>
        </li>
        <li><a href="iPadAir.php">iPad Air Review</a>
        </li>
        <li><a href="iPadMini2.php">iPad mini 2 Review</a>
        </li>
      </ul>
    </li>
    <li class="has-sub"><i class="fa fa-angle-up">iPhone</i>
      <ul class="sub-menu">
        <li><a href="iPhone6.php">iPhone 6 Review</a>
        </li>
        <li><a href="iPhone5s.php">iPhone 5s Review</a>
        </li>
        <li><a href="iPhone5c.php">iPhone 5c Review</a>
        </li>
        <li><a href="iPhone5.php">iPhone 5 Review</a>
        </li>
        <li><a href="iPhone4s.php">iPhone 4s Review</a>
        </li>
      </ul>
    </li>
    <li class="has-sub"><i class="fa fa-angle-up">Map</i>
      <ul class="sub-menu">
        <li><a href="MacBook.php">MacBook Review</a>
        </li>
        <li><a href="MacBookProRetina.php">MacBook Pro w/ Retina display Review</a>
        </li>
        <li><a href="MacBookPro.php">MacBook Pro Review</a>
        </li>
        <li><a href="MacBookAir.php">MacBook Air Review</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

Answer 5

Answer №3

If you want to dynamically add and remove classes using jQuery, you can do so easily with the following example:

Check out this JSFiddle demo for a live demonstration.

This is how your HTML structure would look like:

<ul>
    <li class="fa-angle">Test (Click me to toggle classes)</li>
</ul>

Here's the corresponding CSS styling:

.fa-angle{
    color: red;
    cursor: pointer;
}

.fa-angle-up{
    color: blue;
    cursor: pointer;
}

And here is the jQuery script that handles the class toggling:

$(document).ready(function(){
    $(document).on('click', '.fa-angle', function(){
        $(this).addClass('fa-angle-up');
        $(this).removeClass('fa-angle');                     
    });

    $(document).on('click', '.fa-angle-up', function(){
        $(this).addClass('fa-angle');
        $(this).removeClass('fa-angle-up');                     
    });
});

In this example, I'm simply changing font colors by adding and removing classes, but you can customize the classes to suit your needs, such as adding or removing icons or other styles. I hope this explanation helps!

Answer 6

If you want to dynamically add and remove classes using jQuery, you can do so easily with the following example:

Check out this JSFiddle demo for a live demonstration.

This is how your HTML structure would look like:

<ul>
    <li class="fa-angle">Test (Click me to toggle classes)</li>
</ul>

Here's the corresponding CSS styling:

.fa-angle{
    color: red;
    cursor: pointer;
}

.fa-angle-up{
    color: blue;
    cursor: pointer;
}

And here is the jQuery script that handles the class toggling:

$(document).ready(function(){
    $(document).on('click', '.fa-angle', function(){
        $(this).addClass('fa-angle-up');
        $(this).removeClass('fa-angle');                     
    });

    $(document).on('click', '.fa-angle-up', function(){
        $(this).addClass('fa-angle');
        $(this).removeClass('fa-angle-up');                     
    });
});

In this example, I'm simply changing font colors by adding and removing classes, but you can customize the classes to suit your needs, such as adding or removing icons or other styles. I hope this explanation helps!

Answer 7

Answer №4

    $(document).ready(function() { 
$(".has-sub").click(function() {
$(this).find('i.fa-angle-down').toggleClass('fa-angle-down fa-angle-up');
    $(this).find(".sub-menu").slideToggle(500);
 $(this).parent().children(".has-sub").not(this).find(".sub-menu").slideUp(500).parents('li').find('i.fa-angle-up').toggleClass('fa-angle-up fa-angle-down'); 
}); 
});

Answer 8

    $(document).ready(function() { 
$(".has-sub").click(function() {
$(this).find('i.fa-angle-down').toggleClass('fa-angle-down fa-angle-up');
    $(this).find(".sub-menu").slideToggle(500);
 $(this).parent().children(".has-sub").not(this).find(".sub-menu").slideUp(500).parents('li').find('i.fa-angle-up').toggleClass('fa-angle-up fa-angle-down'); 
}); 
});

Toggle class based on the open status of a div element

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Creating a layered effect with CSS: Combining color gradients and images for an eye-catching background

Dimensions of table in Internet Explorer and Microsoft Outlook

Dragging a DIV element continuously through repeated clicks and long mouse button presses

Clicking an ASP.NET Button without any code will cause the page to reload in a new window

How to efficiently store data using ajax and php techniques

CSS: Floating navigation bar that becomes fixed upon reaching the top of the page

Issue with jQuery not retrieving clicked text values correctly

Clear PHP variable following AJAX post

ajaxform is not providing the correct response

Website experiencing issues with image sizing

substituting the text in a Django-rendered template

Corrupting the structure of XML data

Error: The specified object does not contain the 'tableRow' method

"When attempting to submit edits, the value is returning as null from the dialog box

How to retrieve the query string in VueJS

Issue with AJAX causing form data not to be passed to controller

Dimensions of Bootstrap carousel

What is the best way to trigger a function exclusively upon clicking a particular element?

Achieve a polished and radiant illumination using Cascading Style Sheets

By simply clicking a button, you can input a value into a field without the need for the page to refresh