Created
October 14, 2018 05:13
-
-
Save santosh/88806dcb02ff7192da065bd2b189fb62 to your computer and use it in GitHub Desktop.
Changing class onclick. #JavaScript
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| background: #eee; | |
| } | |
| #content { | |
| width: 400px; | |
| background: #fff; | |
| padding: 20px; | |
| padding-top: 0; | |
| font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; | |
| font-size: 18px; | |
| color: #444; | |
| margin: 0 auto; | |
| max-height: 270px; | |
| overflow: hidden; | |
| -webkit-transition: max-height 0.7s; | |
| -moz-transition: max-height 0.7s; | |
| transition: max-height 0.7s; | |
| } | |
| #content.open { | |
| max-height: 1000px; | |
| -webkit-transition: max-height 0.7s; | |
| -moz-transition: max-height 0.7s; | |
| transition: max-height 0.7s; | |
| } | |
| #show-more { | |
| background: #1594e5; | |
| color: #fff; | |
| font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; | |
| display: block; | |
| width: 140px; | |
| font-size: 24px; | |
| text-transform: uppercase; | |
| padding: 10px; | |
| text-align: center; | |
| margin: 20px auto; | |
| cursor: pointer; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <title>JavaScript</title> | |
| <link rel="stylesheet" href="onclick.css" type="text/css" media="screen" charset="utf-8"> | |
| </head> | |
| <body> | |
| <div id="content"> | |
| <p>Voluptatem autem et qui placeat reiciendis officiis reprehenderit. Commodi et sit eum itaque sequi itaque dolores. Et voluptates sunt saepe laborum omnis sint. Alias id culpa qui earum qui. Quo voluptatibus tempora ducimus illo totam aspernatur. Tempore est quis veniam hic.</p> | |
| <p>Minus aut et veritatis ducimus. Dignissimos occaecati ad quidem assumenda amet aut. Doloribus quia sed vero et cum fugiat.</p> | |
| <p>Debitis eaque facere dolorem atque iste dolorum nam vero. Dolor ea atque facilis sapiente repellendus voluptas. Voluptatum id voluptas dolores aut. Ut est eius iure et est quis. Nostrum ut tenetur mollitia et exercitationem suscipit. Nulla delectus eius debitis illo voluptates.</p> | |
| <p>Perspiciatis impedit sed mollitia dolores. Aspernatur ut omnis repellendus dolorem ex. Dicta velit dolores hic quam quia unde qui et. Quasi temporibus ipsum eum consequatur. Temporibus eius odio quo impedit praesentium delectus dicta. Neque veniam id quos.</p> | |
| <p>Maiores enim quidem eveniet. Qui alias iure beatae quia velit qui. Commodi necessitatibus neque eligendi reprehenderit ex voluptatem exercitationem id.</p> | |
| </div> | |
| <a id="show-more">Show More</a> | |
| <script src="onclick.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| let content = document.getElementById("content"); | |
| let button = document.getElementById("show-more"); | |
| button.onclick = function() { | |
| if (content.className == "open") { | |
| // shrink the box | |
| content.className = ""; | |
| button.innerHTML = "Show More"; | |
| } else { | |
| // expand the box | |
| content.className = "open"; | |
| button.innerHTML = "Show Less"; | |
| } | |
| }; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment