How to change + to - when parent menu is clicked

Question

How to change + to - when menu parent menu item is clicked. i was looking to target ::after element using jquery but i cant find way to target pseudo element using jquery

I want to change below css to when perent menu is clicked

.ir-nav-w > ul li::after {
    /* padding-left: 10px; */
    text-transform: uppercase;
    content: "-";
    position: absolute;
    left: 15px;
    top: 4px;
    line-height: 30px;
    font-size: 20px;
    z-index: 0;
}

Fiddle code

$(".nav-w > ul > li > a").click(function() {
  $(this).next().slideToggle();
});


//open active list
$('.nav-w ul li').children().has('.active-menu').css('display', 'block');


// compare url with nav url to show active url 
$(function() {
  //var url = window.location.href;
  var url = window.location.pathname;
  var pgurl = window.location.href.substr(
    window.location.href.lastIndexOf("/") + 1
  );
  $(".nav-w ul li a").each(function() {
    if ($(this).attr("href") == url || $(this).attr("href") == "") {
      $(this).addClass("active-menu");
    }
  });

  console.log("url : " + window.location.pathname);
});

.nav-w a {
  color: black;
  padding: 10px 15px;
  padding-left: 35px;
  text-decoration: none;
  display: block;
  border-bottom: 1px solid #f1f1f1;
  font-size: 12px;
  font-weight: 600;
  /* color: #178B43 !important; */
  color: #757575;
}


/* ul inside content area*/

.nav-w ul {
  margin-left: 0px;
  list-style-type: none;
  margin-bottom: 0px;
}

.nav-w ul li {
  /*padding-left: 10px;*/
  text-transform: uppercase;
  position: relative;
  width: 100%;
}


/* ol inside content area*/

.nav-w>ul {
  padding-left: 0px;
  padding-right: 0px;
}

.nav-w ul>li ul {
  padding-left: 0px;
  padding-right: 0px;
  display: none;
}

.active-menu {
  color: red !important;
}

.nav-w>ul li::after {
  text-transform: uppercase;
  content: "+";
  position: absolute;
  left: 15px;
  top: 4px;
  line-height: 30px;
  font-size: 20px;
  z-index: 0;
}

.nav-w>ul li ul li::after {
  text-transform: uppercase;
  content: "";
  position: absolute;
  left: 0px;
  top: 5px;
  line-height: 32px;
  font-size: 20px;
  z-index: 0;
}

.nav-w ul li ul li a {
  padding-left: 45px;
}

.nav-w a:hover {
  background: #f5f5f5;
  border-left: 2px solid #178B43;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav-w">

  <ul class="">
    <li><a href="#" style="cursor: default;">Share Information</a>
      <ul class="" style="display: none;">
        <li><a href="/investor-relations/share-nformations/share-overview/">Share Overview</a></li>
        <li><a href="/investor-relations/share-nformations/share-graph/">Share Graph </a></li>
        <li><a href="/investor-relations/share-nformations/investor-calculator/">Investement Calculator</a></li>
        <li><a href="/investor-relations/share-nformations/share-prices/">Historical Share Prices</a></li>
      </ul>
    </li>
    <li><a href="#" style="cursor: default;">Financial Information</a>
      <ul class="" style="display: none;">
        <li><a href="/investor-relations/financial-information/earning-releases/">Earning Releases</a></li>
        <li><a href="/investor-relations/financial-information/financial-statements/">Financial Statements</a></li>
        <li><a href="/investor-relations/financial-information/presentation">Presentation
</a></li>
        <li><a href="/investor-relations/financial-information/quarterly-key-figures">Quarterly Key Figures
</a></li>
        <li><a href="/investor-relations/financial-information/annual-key-figures">Annual Key Figures
</a></li>
      </ul>
    </li>

  </ul>
</div>

psuedo content cant change with jquery, but you can add / remove the class based on click / slide toggle and display + / - with class . — Devsi Odedra, Dec 23 '19 at 12:31

score 1 · Answer 1 · answered Dec 23 '19 at 12:32

1

The way I would do it is to add a class to the parent menu after it is clicked, such as open.

And then in your css you could add a special modifier:

.nav-w > ul li.open::after {
    content: "-"
}

And when it is click again, remove the class open.

answered Dec 23 '19 at 12:32

T. Short

3,481
14
30

score 1 · Answer 2 · answered Dec 23 '19 at 12:37

You can't manipulate :after, because it's not technically part of the DOM and therefore is inaccessible by any JavaScript. But you can add a new class with a new ::after specified.

Add this to your code:

// JS
const $listItems = $('.ir-nav-w > ul li');
$listItems.onClick(
  $listItems.removeClass('closed');
  this.addClass('closed')
);

// CSS
.ir-nav-w > ul li.closed::after {
  content: "+";
}

score 1 · Answer 3 · answered Dec 23 '19 at 12:38

Trick is to add css:

.nav-w > ul li.selected::after {
    content: "-";
}

and toggle selected class on click:

$(".nav-w > ul > li > a").click(function () {
      $(this).parent().toggleClass("selected");
      $(this).next().slideToggle();
});

$(".nav-w > ul > li > a").click(function () {
  $(this).parent().toggleClass("selected");
  $(this).next().slideToggle();
});


//open active list
$('.nav-w ul li').children().has('.active-menu').css('display', 'block');

.nav-w a {
 color: black;
 padding: 10px 15px;
 padding-left: 35px;
 text-decoration: none;
 display: block;
 border-bottom: 1px solid #f1f1f1;
 font-size: 12px;
 font-weight: 600;
 /* color: #178B43 !important; */
 color: #757575;

}
/* ul inside content area*/
.nav-w ul{
    margin-left: 0px;
    list-style-type:none;
    margin-bottom:0px;

}
.nav-w ul li{
    /*padding-left: 10px;*/
    text-transform:uppercase;
    position:relative;
    width:100%;
}
/* ol inside content area*/
.nav-w > ul {
  padding-left: 0px;
  padding-right: 0px;
}
.nav-w  ul > li ul {
  padding-left: 0px;
  padding-right: 0px;
  display:none;
}


.active-menu {
 color: red !important;
}
.nav-w > ul li::after {
 text-transform: uppercase;
 content: "+";
 position: absolute;
 left: 15px;
 top: 4px;
 line-height: 30px;
 font-size: 20px;
 z-index: 0;
}
.nav-w > ul li.selected::after {
   content: "-";
}
.nav-w > ul li ul li::after {
 text-transform: uppercase;
 content: "";
 position: absolute;
 left: 0px;
 top: 5px;
 line-height: 32px;
 font-size: 20px;
 z-index: 0;
}
.nav-w ul li ul li a {
    padding-left:45px;
}
.nav-w a:hover {
 background: #f5f5f5;
 border-left: 2px solid #178B43;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav-w">

    <ul class="">
        <li><a href="#" style="cursor: default;">Share Information</a>
            <ul class="" style="display: none;">
                <li><a href="/investor-relations/share-nformations/share-overview/">Share Overview</a></li>
                <li><a href="/investor-relations/share-nformations/share-graph/">Share Graph </a></li>
                <li><a href="/investor-relations/share-nformations/investor-calculator/" >Investement Calculator</a></li>
                <li><a href="/investor-relations/share-nformations/share-prices/">Historical Share Prices</a></li>
            </ul>
        </li>
        <li><a href="#" style="cursor: default;">Financial Information</a>
            <ul class="" style="display: none;">
                <li><a href="/investor-relations/financial-information/earning-releases/">Earning Releases</a></li>
                <li><a href="/investor-relations/financial-information/financial-statements/">Financial Statements</a></li>
                <li><a href="/investor-relations/financial-information/presentation">Presentation
</a></li>
                <li><a href="/investor-relations/financial-information/quarterly-key-figures">Quarterly Key Figures
</a></li>
                <li><a href="/investor-relations/financial-information/annual-key-figures">Annual Key Figures
</a></li>
            </ul>
        </li>

    </ul>
</div>

how can we keep this as - if child menu is active & has `active-menu` class Share Graph ` — Learning, Dec 23 '19 at 12:45
There is currently no 'parent' selector in css and we need to mark it somehow from JS (here we toggle `selected` class). We should do that where we collapse/uncollapse our menu as shown in snipped (we could even uncolapse it automatically based on this class but this is different task to be honest, and deserves its own question). — Scalway, Dec 23 '19 at 13:54

score 0 · Answer 4 · answered Dec 23 '19 at 12:33

It's not actually possible to target :after, because it isn't part of the DOM and can't be accessed through JavaScript code. This isn't a jQuery limitation.

You could just set a class on the element itself, and change the :after rule when the class is set, i.e.:

.nav-w > ul li.active::after 
{
  content: "-"
}

score 0 · Answer 5 · answered Dec 23 '19 at 12:35

Add active class to the anchors' parent:

$(".nav-w > ul > li a").click(function () {
   $(this).next().slideToggle();
   $(this).parent().toggleClass('active');
});

And replace ::after on the active class:

.nav-w > ul li.active::after {
   content: '-'
}

score 0 · Answer 6 · answered Dec 23 '19 at 12:37

You can do with :after prop.

You can do something like this

.li-item::after{
     content: "+";
}
.li-item-minus::after{
     content: "-" !important;
}

While in jQuery - you can toggle class .li-item-minus on click of each list item

jQuery(".naw-v ul li").on("click", function(){
  jQuery(this).toggleClass("li-item-minus");
});

Which means - on click of this li element, you toggleClass li-item-minus which has different content form main one.

How to change + to - when parent menu is clicked

6 Answers6