how can we change property of sudo classes as like :before and :after in javascript

Question

I was creating custom accordion it created but the problem is i need to a plus and minus icon on that accordion when i click on accordion the plus sign the accordion opens and plus sign changes in minus sign and vice versa below is code given Thanks in Advance); The plus sign changes on active accordion not for all. i mean i will click on first accordion the plus sign of first accordion changes rest will remain same

HTML

<h2>Accordion</h2>

<button class="accordion">Section 1</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Section 2</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Section 3</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

js

<script>
var acc = document.getElementsByClassName('accordion');
var i;
for(i=0;i < acc.length;i++){
acc[i].onclick = function(){
var panel = this.nextElementSibling;
if(panel.style.display =="block"){
panel.style.display ="none";
}
else{
panel.style.display ="block";
panel.class
}
}
}
</script>

Csss

button.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
    margin-bottom:5px;
}

button.accordion.active, button.accordion:hover {
    background-color: #ddd; 
}
button.accordion:before{
  content: '\002B';
    font-size: 13px;
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}
div.panel {
    padding: 4px 20px;
    display: none;
    background-color: #ddd;
     margin-bottom:10px;
}

Fiddle:https://jsfiddle.net/gncrhc5a/

@ Rehban Khatri but i need it in javascript not in jquery.... if don't mind can you plzz udate the fiddle with your code that will apppericiated — Mujtaba Hussain Bhat, Apr 12 '17 at 05:26
See also [JQuery select pseudo-element :after](http://stackoverflow.com/questions/27254674/jquery-select-pseudo-element-after/) — guest271314, Apr 12 '17 at 05:37
@ guest271314 can you please update my fiddle so that i can get it easily — Mujtaba Hussain Bhat, Apr 12 '17 at 06:06
Have you tried to implement either of the two linked approaches? — guest271314, Apr 12 '17 at 06:35
@ guest271314 47 i did it with jquery but problem is now that when i click first accordion the plus sign should be change for first but it changes all three accordions i think there should be use of either index or active class but i don't know how to use that can you please help me in that scenario i am giving u my Fiddle https://jsfiddle.net/gncrhc5a/2/ — Mujtaba Hussain Bhat, Apr 12 '17 at 09:36

score 0 · Answer 1 · answered Apr 12 '17 at 15:18

After re-reading the Question, the "duplicate" vote was not appropriate. javascript at Question does not actually attempt to change css :before or :after, but rather, toggle .className of element.

At javascript you were missing c after fun at $("button").click(funtion(){; change $(".accordion").removeClass('accordion-icon').addClass('minus-icon') to $(this).toggleClass('accordion-icon minus-icon') to reference current button element, instead of all .accordion elements.

At css if you want the "-" to be rendered at same position of "+", the same css should be applied at .minus-icon:before selector, except for content property.

$(document).ready(function() {
  $(".accordion").click(function() {
    $(this).toggleClass("accordion-icon minus-icon").next(".panel").toggle();
  });
});

button.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
  margin-bottom: 5px;
}

button.accordion.active,
button.accordion:hover {
  background-color: #ddd;
}

.accordion-icon:before {
  content: '\002B';
  font-size: 13px;
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.minus-icon:before {
  content: "\2212";
  font-size: 13px;
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

div.panel {
  padding: 4px 20px;
  display: none;
  background-color: #ddd;
  margin-bottom: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Accordion</h2>

<button class="accordion accordion-icon">Section 1</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion accordion-icon">Section 2</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion accordion-icon">Section 3</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

how can we change property of sudo classes as like :before and :after in javascript

1 Answers1