seo Question posted in
Some basic information to get you started with this can be found here.

Pure Javascript add style on click – SEO

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.

JSFiddle

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;
}
Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 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)'
    }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search