step 1

Tutorials of (Step 1) by Mohan sethuraman

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>step 1</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  

<!--parent-accordian-->
<div class="p-part">
   <h3>Select the kids you want to play volunteer Role</h3>
 <div class="kid-list">
   <label class="master-name"><input type="checkbox" class="master-check" /> Mohan Sethuraman </label>
    <div class="roles">
      <h3>Select Roles</h3>
      <div class="role-row">
        <label><input type="checkbox"> Officer</label>
        <label><input type="checkbox"> Officer</label>
        
      </div>
      <div class="volunteer-detail">
        <form action="">
          <h4>Enter Volunteer Details</h4>
          <div class="form-group">
            <label for="">  First Name</label>
            <input type="text" />
          </div>
          <div class="form-group">
            <label for=""> Last Name</label>
            <input type="text" />
          </div> 
          <div class="form-group">
            <label for=""> Email</label>
            <input type="email" />
          </div>
          <div class="form-group">
            <label for=""> Phone Number</label>
            <input type="tel" />
          </div>
          <div class="form-group">
            <label for="">Message</label>
            <textarea></textarea>
          </div> 
        </form>
      </div>
      
    </div>
 </div>
  
 <div class="kid-list">
     <label class="master-name"><input type="checkbox" id="asdf" class="master-check" /> Mohan Sethuraman </label>
    <div class="roles">
      <h3>Select Roles</h3>
      <div class="role-row">
        <label><input type="checkbox"> Officer</label>
        <label><input type="checkbox"> Officer</label>
      </div>
      <div class="volunteer-detail">
        <form action="">
          <h4>Enter Volunteer Details</h4>
          <div class="form-group">
            <label for="">  First Name</label>
            <input type="text" />
          </div>
          <div class="form-group">
            <label for=""> Last Name</label>
            <input type="text" />
          </div> 
          <div class="form-group">
            <label for=""> Email</label>
            <input type="email" />
          </div>
          <div class="form-group">
            <label for=""> Phone Number</label>
            <input type="tel" />
          </div>
          <div class="form-group">
            <label for="">Message</label>
            <textarea></textarea>
          </div> 
        </form>
      </div>
      
    </div>
  </div>    
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>

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

</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
div {
  box-sizing: border-box;
}

.activity-table {
  width: 700px;
  border: 1px solid grey;
  margin: auto;
  font-family: "Verdana";
}

.row {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.8);
  overflow: hidden;
  border-bottom: 1px solid #dbdbdb;
  display: flex;
}
.row .col {
  float: left;
  padding: 10px;
  border-right: 1px solid #dbdbdb;
  overflow: hidden;
}
.row .col:first-child {
  width: 10%;
}
.row .col:nth-child(2) {
  width: 30%;
}
.row .col:nth-child(3) {
  width: 60%;
}
.row .col:nth-child(3) .sub-col {
  overflow: hidden;
  padding-bottom: 5px;
  margin-bottom: 5px;
}
.row .col:nth-child(3) .games {
  width: 70%;
  float: left;
  padding-right: 10px;
}
.row .col:nth-child(3) .fee {
  width: 30%;
  float: left;
}

.row.table-header {
  font-size: 16px;
  font-weight: 700;
  background: #f5f5f7;
}

.checkbox .box {
  width: 20px;
  display: block;
  float: left;
  position: relative;
  left: -5px;
}

/* parent-partcicpation*/
.p-part {
  font-family: "Verdana";
  width: 700px;
  margin: 40px auto;
}
.p-part .master-name {
  display: block;
  width: 100%;
  padding: 5px 0;
  border-bottom: 1px solid #dbdbdb;
  font-size: 20px;
}
.p-part .roles {
  margin-left: 20px;
  margin-bottom: 20px;
  overflow: hidden;
  display: none;
  background: #fafafa;
  padding: 20px;
}
.p-part .roles h3 {
  margin-top: 0;
}
.p-part .roles .role-row {
  overflow: hidden;
}
.p-part .roles .role-row label {
  width: 33%;
  display: block;
  float: left;
  padding: 5px 0;
  font-size: 14px;
}

.volunteer-detail .form-group {
  width: 25%;
  float: left;
  padding: 5px;
}
.volunteer-detail .form-group label {
  font-size: 13px;
  display: block;
}
.volunteer-detail .form-group:last-child {
  width: 100%;
}
.volunteer-detail .form-group:last-child textarea {
  width: 100%;
}
.volunteer-detail .form-group input {
  display: block;
  width: 100%;
  height: 25px;
}
/* Downloaded from https://www.codeseek.co/ */
$('.master-check').on('click', function(){
  //alert('click')
  if($(this).is(':checked'))
    $(this).parents('.kid-list').find('.roles').slideDown(300);
    else
      $(this).parents('.kid-list').find('.roles').slideUp(300);
  
})

This awesome code ( step 1 ) is write by Mohan Sethuraman, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Mohan Sethuraman