CODEWITHSUNDEEP
jqueryhtmlcss
Chris
Chris

Reputation: 2176

Add and Remove Class Based on Whether Div is Open

I have this HTML that goes with the following jQuery:

<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);
    });
});

As you can see the i has a class of fa-angle-down. When clicked, the li opens but I'd like to remove the class of fa-angle-down and add a class of fa-angle-up to the i class. Could someone please show me how I would do this?

Thanks.

EDIT:

CSS for navigation 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;
}

Upvotes: 4

Views: 948

Answers (4)

zer00ne
zer00ne

Reputation: 43910

When using an anchor <a> for something other than going to a location, use preventDefault();. The fa-angle-down class was assigned to an italic <i> element, when I think you wanted the list item <li>. It appears to have an accordion effect, correct? The off and on of the required classes are done with toggleClass. When you have the links pointing to real locations, 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>

Upvotes: 1

amespower
amespower

Reputation: 917

EDITED This works, checked that the classes are toggling in the DOM. Edit was to just toggle .fa class initially which toggles on/off the down/up for the menu item that is clicked.

$(".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');
});

Upvotes: 1

Ahmadbaba46
Ahmadbaba46

Reputation: 231

    $(document).ready(function() { 
$(".has-sub").click(function() {
$(this).find('i.fa-angle-down').removeClass('fa-angle-down').addClass('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').removeClass('fa-angle-up').addClass('fa-angle-down'); 
}); 
});

Upvotes: 0

Brian Moreno
Brian Moreno

Reputation: 1027

You can use jQuery to add and remove classes. Sometihng like this:

http://jsfiddle.net/j95en0Lp/1/

HTML:

<ul>
    <li class="fa-angle">Test (Click me to add a new class)</li>
</ul>

CSS:

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

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

jQuery:

$(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');                     
    });
});

Here I'm just adding and removing classes to change the font color, but you can change the classes to add or remove icons, font color, etc. Hope this help out.

Upvotes: 0

Related Questions