<!DOCTYPE html>
<html>
<head>
<style>
.hide:target {
border: 1px solid #D4D4D4;
background-color: #eee;
padding: 1em;
border-radius:3px;
display: block;
animation: highlight 0.5s ease-in;
}
@keyframes highlight {
0% { padding: 1em; opacity:0.5; }
0% { padding: 1.1em; }
100% { padding: 1em;}
}
.hide {
display:none;
transition: all 1s ease;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p><a href="#muhaza">Muhaza</a>
<a href="#hafiz">Hafiz</a></p>
<p>Click on the links above and the :target selector highlight the current active HTML anchor.</p>
<p class="hide" id="muhaza"><b>Seorang yang professional dia dapat nama ni lepas dapat kerja</b></p>
<p class="hide" id="hafiz"><b>Dia ni budak sangat.. harapnya sihatla hendaknya</b></p>
<p><b>Note:</b> Internet Explorer 8 and earlier versions do not support the :target selector.</p>
</body>
</html>
Just found this (well I think I'm the one that late) just hide and unhide option just like jquery but using css
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.