Daniel Mayle Daniel Mayle - 2 months ago 7
HTML Question

Adding contact information to new div using jQuery

I am working on a project where the user enters first name, last name, and a brief description. After hitting the submit button the first and last name will transfer to a new div below. If you click on the the first and last name the new div will flip and show the description the user wrote for himself/herself. If the user clicks on the description the card flips back to first and last name.
I am able to get the first and last name to transfer after hitting the submit button. However, I am having difficulty getting the card with the first and last name to flip and show the description information and flipping back to the first and last name. Any suggestions would be appreciated.



$(document).ready(function() {
alert('jQuery activated');

$('form').submit(function() {
alert('form submitted');
$('#contact_card').append("<div class='person'><h4>" + $('#first_name').val() + " " + $('#last_name').val() + "</h4><p>Click for more details</p></div>");

return false;


});

$(document).on('click', '.person', function() {
alert('user clicked');
$(this).children().toggle('slow');




});

});

* {
font-family: "Tahoma";
margin: 0px;
padding: 0px;
}
#container {
width: 1000px;
height: 750px;
margin: 0px auto;
}
#left,
form {
display: inline-block;
max-width: 500px;
}
#left form h3 {
margin: 0px 0px 13px 0px;
}
.person {
border: 8px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<head>
<title>Advanced jQuery Assignment III: Contact Card</title>

</head>

<body>
<div id="container">
<div id="left">
<form>
<br>First Name:
<input class="user_input" type="text" id="first_name">
<br>
<br>Last Name:
<input class="user_input" type="text" id="last_name">
<br>
<label for="description"></label>
<textarea name="description" type="text" id="description" cols="50" rows="10">Enter Description</textarea>
<br>
<input type="submit" value="Add User">
</form>
</div>
<!-- end of left -->

<div id="bottom">
<div id="contact_card">

</div>
<!-- end of contact_card -->
</div>
<!-- end of bottom -->
</div>
<!-- end of container -->




Answer

So add the description to the contact_card in a hidden p. Then when you click on class person just toggle the p children.

$(document).ready(function() {

  $('form').submit(function() {
    $('#contact_card').append("<div class='person'><h4>" + $('#first_name').val() + " " + $('#last_name').val() + "</h4><p>Click for more details</p><p hidden>"+$('#description').val()+"</p></div>");

    return false;
  });

  $(document).on('click', '.person', function() {
    $(this).children('p').toggle('slow');
  });

});
* {
  font-family: "Tahoma";
  margin: 0px;
  padding: 0px;
}
#container {
  width: 1000px;
  height: 750px;
  margin: 0px auto;
}
#left,
form {
  display: inline-block;
  max-width: 500px;
}
#left form h3 {
  margin: 0px 0px 13px 0px;
}
.person {
  border: 8px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<head>
  <title>Advanced jQuery Assignment III: Contact Card</title>

</head>

<body>
  <div id="container">
    <div id="left">
      <form>
        <br>First Name:
        <input class="user_input" type="text" id="first_name">
        <br>
        <br>Last Name:
        <input class="user_input" type="text" id="last_name">
        <br>
        <label for="description"></label>
        <textarea name="description" type="text" id="description" cols="50" rows="10">Enter Description</textarea>
        <br>
        <input type="submit" value="Add User">
      </form>
    </div>
    <!-- end of left -->

    <div id="bottom">
      <div id="contact_card">

      </div>
      <!-- end of contact_card -->
    </div>
    <!-- end of bottom -->
  </div>
  <!-- end of container -->