waterlink/application.scss

## application.scss
@mixin transition($x) {
          transition: #{$x};
       -o-transition: #{$x};
     -moz-transition: #{$x};
  -webkit-transition: #{$x};
}

ul.tabs {
  list-style: none;

  .tab {
    .content {
      @include transition('max-height 0.1s ease-in');
    }

    &:not(:target) {
      .content {
        max-height: 0;
        overflow: hidden;
      }
    }

    &:target {
      .content {
        max-height: 400px;
      }
    }
  }
}

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <link href="/app/stylesheets/application.css" type="text/css" rel="stylesheet">
</head>
<body>
  <main>
    <ul class="tabs">
      <li id="tab1" class="tab">
        <div class="title"><a href="#tab1">Hello</a></div>
        <div class="content">
          Consectetur aspernatur itaque assumenda eaque cupiditate! Laudantium voluptatum suscipit debitis deleniti facere ut sapiente nobis! Obcaecati quod sapiente inventore totam accusantium quasi eius officia aut. Hic minus beatae vel similique!
        </div>
      </li>
      <li id="tab2" class="tab">
        <div class="title"><a href="#tab2">World</a></div>
        <div class="content">
           Amet tenetur sunt omnis inventore aliquid. Perferendis veniam nesciunt velit itaque ab placeat magni necessitatibus nulla culpa autem earum dignissimos pariatur eos doloribus corporis, distinctio esse veritatis sint? Assumenda eaque.
        </div>
      </li>
      <li id="tab3" class="tab">
        <div class="title"><a href="#tab3">Bga</a></div>
        <div class="content">
          Consectetur quos tempore magni consequuntur ipsum itaque laudantium dolorum molestiae accusamus sint rem. Vitae quibusdam sint necessitatibus in nam praesentium accusantium? Illum cum reprehenderit nulla sint dignissimos? Laboriosam tempora eum.
        </div>
      </li>
    </ul>
  </main>
</body>
</html>
	@mixin transition($x) {
	transition: #{$x};
	-o-transition: #{$x};
	-moz-transition: #{$x};
	-webkit-transition: #{$x};
	}

	ul.tabs {
	list-style: none;

	.tab {
	.content {
	@include transition('max-height 0.1s ease-in');
	}

	&:not(:target) {
	.content {
	max-height: 0;
	overflow: hidden;
	}
	}

	&:target {
	.content {
	max-height: 400px;
	}
	}
	}
	}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title></title>
	<link href="/app/stylesheets/application.css" type="text/css" rel="stylesheet">
	</head>
	<body>
	<main>
	<ul class="tabs">
	<li id="tab1" class="tab">
	<div class="title"><a href="#tab1">Hello</a></div>
	<div class="content">
	Consectetur aspernatur itaque assumenda eaque cupiditate! Laudantium voluptatum suscipit debitis deleniti facere ut sapiente nobis! Obcaecati quod sapiente inventore totam accusantium quasi eius officia aut. Hic minus beatae vel similique!
	</div>
	</li>
	<li id="tab2" class="tab">
	<div class="title"><a href="#tab2">World</a></div>
	<div class="content">
	Amet tenetur sunt omnis inventore aliquid. Perferendis veniam nesciunt velit itaque ab placeat magni necessitatibus nulla culpa autem earum dignissimos pariatur eos doloribus corporis, distinctio esse veritatis sint? Assumenda eaque.
	</div>
	</li>
	<li id="tab3" class="tab">
	<div class="title"><a href="#tab3">Bga</a></div>
	<div class="content">
	Consectetur quos tempore magni consequuntur ipsum itaque laudantium dolorum molestiae accusamus sint rem. Vitae quibusdam sint necessitatibus in nam praesentium accusantium? Illum cum reprehenderit nulla sint dignissimos? Laboriosam tempora eum.
	</div>
	</li>
	</ul>
	</main>
	</body>
	</html>