A Pen by Nicholas Vercruysse

Thumbnail
This awesome code was written by TurnipEntropy, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright TurnipEntropy ©

Technologies

  • HTML
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Nicholas Vercruysse</title>
  
  
  
  
  
</head>

<body>

  <body>
  <input type=text id='text'>
  <input type=button id='button'>
  <div>
    <ul style="list-style:none;">
      <li>
        <a href='#' class="show_hide101plus" toggleid=".Wild"> Wild </a>
        <div id="toggle" class="Wild" style="display:none;">
          I'm here!
        </div>
      </li>
    </ul>
  </div>
</body>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/TurnipEntropy/a-pen-by-nicholas-vercruysse-oGovYz */
$(".show_hide101plus").on("click", function(){
  console.log(event.target);
  var id = $(event.target).attr("toggleid");
  var current = $(id).css("display");
  if (current == "block"){
    $(id).css("display", "none");
  } else {
    $(id).css("display", "block");
  }
});

$("#button").on("click", function(){
  var newClass = $("#text").val();
  newClass = newClass.replace(/((?!([-_A-Za-z0-9])).)/g, "_");
  $(".show_hide101pus").attr("toggleid", "." + newClass);
  $("#toggle").addClass(newClass);
  $(".show_hide101plus").text(newClass);
});

Comments