step 1

In this example below you will see how to do a step 1 with some HTML / CSS and Javascript

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

Technologies

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

<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/mohansethu/step-1-aBbEeW */
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/mohansethu/step-1-aBbEeW */
$('.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);
  
})

Comments