How to add and remove CSS code from classes with pseudo element?

Question

function toggle(){
  var button=document.querySelector('.toggle');
  var bar=document.querySelector('.slide');
  if(bar.className==='slide up'){
    bar.className='slide down';
  }else{
    bar.className='slide up';
   }
}

*{
  margin:0px;
  padding:0px;
  height:100%;
  width:100%;
}
.box{
  overflow:hidden;
  background-image: url('http://tombricker.smugmug.com/Travel/San-Francisco-California/i-jk2Z7D7/0/L/san-francisco-golden-gate-bridge-morning-sun-bricker-L.jpg');
  background-size: cover;
  background-position:center;
}
.slide{
  position: relative;
  left:39vw;
  
  width: 55vw;
  height: 75vh;
  background: red;
  
}
.slide:before {
  content: '';
  position:absolute;
  top:-3vh;
  width: 0px;
  height: 0px;
  
  border-left:27.5vw solid transparent;
  border-right:27.5vw solid transparent;
  
  border-bottom:3vh solid white;  
}
.slide.down{
 transform:translateY(100vh);
}
.slide.up{
  transform:translateY(25vh);
}
.slide{
  transition:transform 0.4s ease-out;
}

<div class='box'>
  <div class='slide up' onclick='toggle()'></div>
</div>

The white triangle on top of the red rectangle is made with pseudo element :before. What I am trying to do is when the sliding tag is up, the white triangle should be pointing down. To do that, I want to write a JS code that will add a transform CSS to that class with pseudo element that will translate triangle down by its height and rotate by 180deg.

I find on this developer blog the JS code to add, but it does not work and I don't know how to delete that code when the tag is down.

function toggle(){
  var button=document.querySelector('.toggle');
  var bar=document.querySelector('.slide');
  if(bar.className==='slide up'){
    bar.className='slide down';
//Here is where I need to add the line to delete CSS
  }else{
    bar.className='slide up';
//This is to add CSS
//3vh is the height of that white triangle
  document.styleSheets[0].addRule('.slight:before','transform:translateY(3vh) rotateX(180deg)');
   }
}

Perhaps you could use different classes with different pseudo elements and just change the class instead of editing the CSS code... Dunno... Might be easier... — Abraham Murciano Benzadon
– Abraham Murciano Benzadon, Commented Jul 10, 2017 at 0:25

Miguel · Accepted Answer · 2017-07-10 17:35:18Z

3

You can add the transformation to the CSS class, and simply toggle it.

CSS

.slide.up:before {
  transform: translateY(3vh) rotateX(180deg);
}

JS

var bar = document.querySelector('.slide')

function toggle() {
  var cl = bar.classList

  cl.toggle('down', cl.contains('up'))
  cl.toggle('up', !cl.contains('down'))
}

JSFiddle demo: https://jsfiddle.net/htq8ouyn/2/

Resources

Element.classList - Web APIs | MDN

edited Jul 10, 2017 at 17:35

answered Jul 10, 2017 at 0:21

Miguel

20.7k5 gold badges47 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

most venerable sir Over a year ago

What are the 2 parameter of toggle() method?Why !contains why the exclamation mark?

most venerable sir Over a year ago

Haha, you dont even need the JS part. Just slide.up:before does it.But can you still explain pls

Miguel Over a year ago

@user132522 ! negates the boolean. second parameter is true or false; turn on or off the class

most venerable sir Over a year ago

So why not use it for the first line

Miguel Over a year ago

@user132522 yes, if UP then ADD DOWN else REMOVE DOWN. if NOT DOWN then ADD UP else REMOVE UP.

|

Collectives™ on Stack Overflow

How to add and remove CSS code from classes with pseudo element?

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related