JSFiddle - React, Tailwind, and code Playground

by Prithviraj mitra

HTML

<a href="1" class="button">Read more title 1</a>

<div class="accordion-wrapper">
  <div>
    <input id="1" name="test" type="checkbox">
    <label for="1">Title 1</label>
    <article>
      <p>Content 1</p>
    </article>
  </div>
    <div>
    <input id="2" name="test" type="checkbox">
    <label for="2">Title 2</label>
    <article>
      <p>Content 2</p>
    </article>
  </div>
</div>

CSS

div input {
  display: none;
}
.accordion-wrapper{
  margin: 2rem 0;
  div{
    margin: 1rem 0;
  }
}
.accordion-wrapper article{
 background: rgba(255, 255, 255, 0.25);
 overflow: hidden;
 max-height: 0px;
 position: relative;
 transition: max-height 0.3s ease-in-out;
 border: 1px solid #eee;
 padding: 0 15px;
}

.accordion-wrapper label {
    position: relative;
    display: block;
    cursor: pointer;
    color: #777;
    font-size: 1.1em;
    background: #eeeeee;
    margin: 0;
    padding: 10px 15px;
    border: 1px solid #eee;
    border-bottom: 1px solid transparent;
}

.accordion-wrapper input:checked ~ article{
  max-height: inherit;
}

JavaScript

$("a.button").on("click", function(e) {
  e.preventDefault();

  $(".accordion-wrapper div article").attr('style', 'max-height:inherit;');
  $(".accordion-wrapper input[id=1]").attr('checked', true);
});

//Closing the accordion

$(".accordion-wrapper label").on("click", function(e){
		const next = $(this).next()[0];
		if (next.style.maxHeight) {
			next.style.maxHeight = "";
		}
 });