willhoman/contactcard.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Contact card</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="contactcardcss.css">
    <script>
      $(document).ready(function(){
        $("form").submit(function(){
            return false;
        });
        $("#btn").click(function(){
            var first = $("#first").val();
            var last = $("#last").val();
            var description = $("#description").val();
            $("#list").append("<li><h2>"+first+"  "+last+"</h2><h4>Click here for description</h4><p class='hidden'>"+description+"</p></li>");

          });
        $(document).on("click", "li", function(){
          $(this).find("h2").addClass("hidden");
          $(this).find("h4").addClass("hidden");
          $(this).find("p").removeClass("hidden");

        });

      });
    </script>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-md-4">
          <form action="action_page.php">
            First name:
            <input id="first" type="text" value="First Name"><br>
            Last name:
            <input id="last" type="text" name="lastname" value="Last Name"><br><br>
            Description:<br>
            <textarea  id="description" name="message" rows="10" cols="30">
            Enter Description.
            </textarea><br><br>
            <input id="btn" type="submit" value="Add User">
          </form>
        </div>
        <div class="col-md-4">
          <ul id="list">

          </ul>
        </div>
      </div>
    </div> <!-- end of container -->
  </body>
</html>