비전공자 개발일기

Read More & Read Less Button 본문

JQuery

Read More & Read Less Button

HiroDaegu 2022. 5. 8. 01:38
728x90
SMALL

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>READ MORE & READ LESS</title>
  <link rel="stylesheet" href="style.css">
  <script defer src="main.js"></script>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</head>
<body>
  <h1 align="center">TITLE</h1>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia ullam nemo officiis ipsam laborum quos unde maxime dolore, voluptates eveniet laboriosam consequuntur nesciunt voluptatum rem recusandae id iure, aliquam atque.
  Cum possimus odit nobis quas quasi sunt, nemo dolorum excepturi labore error aut hic. Ratione quod id ipsum. Ipsam magnam animi tempora eligendi nihil eum. Nisi dolorem fugiat aperiam provident?
  Assumenda, odio error. Modi laudantium sunt, dolores odio repellendus tempore architecto assumenda debitis aperiam, molestiae, labore ad placeat nam cupiditate necessitatibus mollitia nisi velit! Voluptatibus quos ab dignissimos aliquam tempore.
  Nisi provident inventore officiis impedit tempora cupiditate enim excepturi nobis voluptatem cum aperiam, dolore doloremque in commodi nostrum voluptate magnam, dicta architecto deserunt obcaecati quasi! Vero quidem nisi quos quia.
  Est perspiciatis tempore cumque quae eligendi ipsa consequuntur nam, unde animi temporibus expedita voluptatibus consequatur atque facere nulla reprehenderit, delectus totam alias iusto illo! Neque cupiditate debitis maxime eius doloribus.
  <div>
    <br>
    <span id="text">
      Voluptas dignissimos sint alias dolores doloremque mollitia non delectus placeat repudiandae animi enim libero dicta nihil neque reprehenderit beatae ipsa porro maxime ullam nesciunt, quibusdam natus. Perspiciatis delectus accusantium fuga?
      Distinctio atque, recusandae earum neque repudiandae debitis ipsam, sapiente minus unde cupiditate delectus porro repellat quos optio numquam at ducimus officia ad sequi mollitia id quae obcaecati dolorem eum! Cum!
      Magni doloribus dolorum provident rerum dolores optio nostrum, voluptate error? Dolorem laboriosam doloremque natus ipsa alias. Pariatur totam reiciendis dicta ea, quia nihil neque porro mollitia error fuga. A, tenetur.
      Reprehenderit id voluptas nisi voluptatibus cum illum est autem odit ullam ratione quos doloribus consequuntur, facilis distinctio unde dolore necessitatibus atque earum provident, vitae sed natus minus velit! Quos, voluptatem?
      Quam, tempore nihil ea accusantium, odio harum delectus impedit facere nesciunt explicabo qui suscipit consectetur quas? Mollitia, beatae, rem provident ad sit doloremque porro reiciendis iste atque doloribus esse voluptas.
    </span>
    <br>
    <span class="source">SOURCE:</span>
    <a href="#">URL</a>
  </div>
  <div class="btn-container">
    <button id="toggle">Read More</button>
  </div>
</body>
</html>
#text {
  display: none;
}

.btn-container {
  margin: auto;
  height: 44px;
  width: 166.23px;
}

a:active {
  color: #ffd323;
}

body {
  background-color: #000;
  font-size: 20px;
  color: #fff;
}

button {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  cursor: pointer;
  border: none;
  padding: 8px;
  font-size: 20px;
  background: linear-gradient(141deg, #0fb8ad 0%, #1fc8db 51%, #2cb5e8 75%);
  color: #fff;
  box-sizing: border-box;
}
$(document).ready(function() {
  $("#toggle").click(function() {
    var elem = $("#toggle").text();
    if(elem == "Read More") {
      $("#toggle").text("Read Less")
      $("#text").slideDown();
    } else {
      $("#toggle").text("Read More")
      $("#text").slideUp();
    }
  })
})
728x90
LIST

'JQuery' 카테고리의 다른 글

SWIPE.js jQuery  (0) 2022.05.23
PHONE NUMBER VAILDATION  (0) 2022.05.21
Dynamic Select Option  (0) 2022.05.04
Conditional Statements in jQuery  (0) 2022.01.08
JQuery - input & button Event  (0) 2022.01.05
'JQuery' Related Articles more