Amp: How to Toggle a CSS Class

AMP: easy way to toggle a CSS class?

This can be done via amp-bind. You can use an implicit state variable, e.g. visible, to track the current state. Here is a sample that toggles two classes show and hide:

  <button [text]="visible ? 'Show Less' : 'Show More'" 
           on="tap:AMP.setState({visible: !visible})">
    Show More
  </button>
  <p [class]="visible ? 'show' : 'hide'" class="hide">
    Some more content.
  </p>

Full sample on JSBIN

AMP: Toggle CSS Class

One way of achieving this would be by using an amp-state to keep track of whether the sidebar is open or closed. Then you can bind the button's class using this state to style it accordingly.

Initialise an amp-state like follows :

<amp-state id = "sbOpen">
    <script type = "application/json">
        false
    </script>
</amp-state>

and now change your sidebar code as follows :

<amp-sidebar

 on="sidebarOpen:AMP.setState({sbOpen});sidebarClose:AMP.setState({sbOpen})"

and finally your button tag should be something like this :

<button class="button closed icon" on='tap:sidebar1.toggle'
        [class]=" 'button icon ' + (sbOpen?'open':'closed) "></button>

Multiple dynamic classes with amp-bind

You can return a single string containing multiple classes inside your amp-bind expression:

<div [class]="(condition1 ? 'classA' : 'classB') + ' ' + (condition2 ? 'classA' : 'classD')">...</div>

how to hide dynamically an div container in AMP Page

Answered by Sebastian Benz with amp-bind : Click Here

You can achieve your goal without amp-bind also

Here is working url

Code

<button id="playerbutton1" class="button" hidden on="tap:player.hide,playerbutton1.hide,playerbutton2.show">hide me</button>
<button id="playerbutton2" class="button" on="tap:player.show,playerbutton2.hide,playerbutton1.show">show me</button>    
<div id="player" hidden>some content</div>

How can I hide the opened dropdown in AMP

The following solution, to toggle the opened dropdown/accordion with amp-bind, works very well for me:

On the first drowdowm/accordion:

<section [data-expand]="expandAc1" on="expand:AMP.setState({expandAc2: false, expandAc1: true})">

And on the other drowdowm/accordion:

<section [data-expand]="expandAc2" on="expand:AMP.setState({expandAc1: false, expandAc2: true})">

Sources:
https://github.com/edelight/amphtml/commit/c8197475a55f8ff15e87fb0969238ec76cf1d71c
AMP: easy way to toggle a CSS class?

Toggle display of all classes

document.getElementsByClassName returns an HTMLCollection, so your hideInactive function is checking style on an HTMLCollection. Iterate the array and check for each element instead.

function hideInactive() {
  var x = document.getElementsByClassName('inactive');

  console.log(x.length);

  for (let i = 0 ; i < x.length; i++) {
    if (x[i].style.display === "none") {
      x[i].style.display = "block";
    } else {
      x[i].style.display = "none";
    }
  }
}

<button onclick="hideInactive()">Show/hide</button>

<div class="inactive">DIV 1: inactive</div>
<p class="inactive">DIV 2: inactive</p>
<ul>
  <li class="inactive">
    List item 1: Inactive
  </li>
  <li>
    List item 2: Active
  </li>
</ul>

How can I play the full animation of a class that was toggled in Javascript using .toggleClass?

I used simple transform to do this animation. Kindly check the below snippet.

function onClick(){
  var elem = document.getElementsByClassName('navTrigger')[0];
  elem.classList.toggle('active');
}

a {
  background-color: #000;
  color: #fff;
  display: block;
  height: 200px;
}

.navTrigger {
  cursor: pointer;
  display: block;
  width: 20px;
  height: 44px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  margin-left: 15px;
}
.navTrigger i {
  background: white;
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  transition: all 0.3s ease;
}

.navTrigger i:nth-child(1) {
  transform: translate(0, 10px);
}

.navTrigger.active i:nth-child(1) {
  transform: rotate(45deg) translate(15px, 15px);
}

.navTrigger.active i:nth-child(2) {
  transform: rotate(-45deg) translate(0px, 0px);
}

<a onclick="onClick()">
  <span class='navTrigger inactive'>
    <i></i>
    <i ></i>
  </span>
</a>

how to toggle an 'active' class but also hide it when clicked again

The problem is that $(this) in the context of your handler is the anchor, and when you call .siblings() on it you get no siblings, because the anchor has no siblings inside of the parent <li/> that contains it. Instead, you can navigate to the parent, get the siblings from there, then target the anchor inside of it:

$(".template-in-conversation .js-accordion-header").on("click", function() { 
    $(this).toggleClass("active");
    $(this).parent().siblings().find("a").removeClass("active");
});

.active {
  background-color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="menu-wrapper template-in-conversation">
    <li><a class="js-accordion-header">item 1</a></li>
    <li><a class="js-accordion-header">item 1</a></li>
    <li><a class="js-accordion-header">item 1</a></li>
</ul>