Pure Javascript add style on click

Question

In jQuery I know how to solve this, but in pure Javascript I don't have any idea.

When click on chevron down my content show, but when show I want to change chevron to be chevron up.

I don't know how to do an 'on click' to change the style and set the following:

transform: rotate(180deg);.

Toggle effect, when click again to return chevron down and repeatly.

HTML:

<p>
Lorem ipsum dolor sit amet consedier tu Lorem ipsum dolor sit amet consedier tu Lorem ipsum dolor sit amet consedier tu Lorem ipsum dolor sit amet consedier tu Lorem ipsum dolor sit amet consedier tu Lorem ipsum dolor sit amet consedier tu Lorem ipsum dolor sit amet consedier tu Lorem ipsum dolor sit amet consedier tu Lorem ipsum dolor sit amet consedier tu 
</p>
<div id="show-more-footer" onclick="myFunction()">
   <i class="fa fa-chevron-down" aria-hidden="true"></i>
</div>


<div id="full-text">
  <div class="col-sm-3">
    <ul>
      <li><a href="#">Seo Link</a></li>
      <li><a href="#">Seo Link nummer</a></li>
      <li><a href="#">Number 3 Seo Link</a></li>
      <li><a href="#">Seo</a></li>
    </ul>
  </div>
  <div class="col-sm-3">
    <ul>
      <li><a href="#">Seo Link</a></li>
      <li><a href="#">Seo Link nummer</a></li>
      <li><a href="#">Number 3 Seo Link</a></li>
      <li><a href="#">Seo</a></li>
      <li><a href="#">Number 5</a></li>
    </ul>
  </div>
  <div class="col-sm-3">
    <ul>
      <li><a href="#">Seo Link</a></li>
      <li><a href="#">Seo Link nummer</a></li>
      <li><a href="#">Number 3 Seo Link</a></li>
      <li><a href="#">Seo</a></li>
    </ul>
  </div>
</div>

JS:

function myFunction() {
    var x = document.getElementById('full-text');
    if (x.style.display === 'block') {
        x.style.display = 'none';
    } else {
        x.style.display = 'block';
    }
}

CSS:

#show-more-footer{
  cursor:pointer;
}
#full-text{
  display:none;
}

A possible duplicate of http://stackoverflow.com/questions/6787383/how-to-add-remove-a-class-in-javascript — Eduard Malakhov, Jan 27 '17 at 10:57
If you want a code that runs on more then one browser, i would strongly advise you to talk to your project members again. I have done big javascript projects before jquery and similar frameworks existed, would never do that again... — Beowolve, Jan 27 '17 at 11:01

AymDev · Accepted Answer · 2017-01-27T11:16:59.570

8

You can directly change style of an element in JavaScript:

element.style.transform = "rotate(180deg)";

This will appear in the HTML as :

<div id="element-id" style="transform: rotate(180deg);"></div>

You could also use the classList API and JS :

.reverse {
    transform: rotate(180deg);
}

And the JS :

element.onclick = function() {
 element.classList.toggle("reverse");
}

MDN - element.classList
CanIUse - classList
The fact that some browsers don't support the .toggle()method is not a problem, use a custom function which uses .add()or .remove().

Last advices (optional) :
I would use CSS transitions with this kind of features (like transition: all 0.3s ease-in-out;) and change your hide/show method by setting a height:0 and overflow:hidden to the content you hide, and onclick of the chevron you give him element.style.height: auto.

edited Jan 27 '17 at 11:16

answered Jan 27 '17 at 10:56

AymDev

6,626
4
29
52

I don't know how to implement on my project in jsfiddle https://jsfiddle.net/fNPvf/35507/ – ml92 Jan 27 '17 at 13:29
@ml92 What don't you understand ? Just replace `element` by your `#show-more-footer` `div`. Or maybe you have to apply this to multiple elements ? In that case you have to get the `event` source in the function to be sure it will act on the right blocks. I'm here to answer if needed – AymDev Jan 27 '17 at 13:36
Not working, I don't know why https://jsfiddle.net/fNPvf/35510/ Thanks in advance, br – ml92 Jan 27 '17 at 13:50
@ml92 you can check my demonstration pen [here](http://codepen.io/AymDev/pen/ygPNbB) and if my answer solved your problem, accept it – AymDev Jan 27 '17 at 14:14
1

you are confused me with your codepen, I posted jsfiddle with my state, can you implement in my project. https://jsfiddle.net/fNPvf/35507/ I will accept you – ml92 Jan 29 '17 at 21:11
Hi @ml92 I am not familiar to jsfiddle, I created an account and modified your fiddle: [here](https://jsfiddle.net/aymdev/fNPvf/35571/) – AymDev Jan 30 '17 at 09:21
Thank you so much, is it possible to add transition smooth slide down and up – ml92 Jan 30 '17 at 11:20
@ml92 I tried with [this](https://jsfiddle.net/aymdev/fNPvf/35577/) , setting the `height` to `500px`, I'd have prefered the `auto` value but the smooth transition wouldn't execute and I'm a bit busy to search for a solution for hours ;-) I hope you understand well how it works ! – AymDev Jan 30 '17 at 11:50

score 0 · Answer 2 · answered Jan 27 '17 at 11:11

0

my first advice would be to not use inline javascript to call your function, you should use a listener instead

var button = document.getElementById('show-more-footer');
button.addEventListener('click', myFunction);

then you can use the callback first argument to get your event

function myFunction(event) {
        var button = event.currentTarget;
    var x = document.getElementById('full-text');
    if (x.style.display === 'block') {
        x.style.display = 'none';
        button.querySelector('i').style.transform = 'rotate(0)'
    } else {
        x.style.display = 'block';
        button.querySelector('i').style.transform = 'rotate(180deg)'
    }
}

answered Jan 27 '17 at 11:11

Giacomo Cosimato

635
5
9

are you passing the `event` parameter to the function? – Giacomo Cosimato Jan 27 '17 at 13:43
I don't understand, what you mean – ml92 Jan 27 '17 at 13:54
this: `function myFunction(event) {` – Giacomo Cosimato Jan 27 '17 at 14:51

Pure Javascript add style on click

HTML:

JS:

CSS:

2 Answers2