JSFiddle - React, Tailwind, and code Playground

by ultranaut

HTML

<div class="hidden">
      <p>Should the line now be yellow?</p>
    </div>
    <div class="below">
      <p>Click me</p>
    </div>

CSS

* { 
    margin: 0; 
    padding: 0; 
}

.hidden { 
    display: none; 
}
.below {
    height: 10px;
    background: red; 
    margin-top: 100px; 
}


/* Margin of Below should reduce when hidden is opened */
.yellow {
    margin-top: 10px; 
    background: yellow;
}

JavaScript

$(function() {
  $('html').click(function() {
    $('.hidden').slideToggle();
    $('.below').toggleClass('yellow');
  });
});