JSFiddle - React, Tailwind, and code Playground

by brightonmike

HTML

<table class="emptylegtable">
<tr class="parent">
    <td class="date"><strong>5th March </strong></td>

    <td>Location: Hannover (EDDV) </td>                    <td>Destination: Le Bourget (LFPB) </td>                    <td class="pax">Number of seats: 9 </td>                   

       <td class="date"><h2 class="h2book active">Book Now</h2></td> 
</tr>

    

<tr class="child">


 
       <td><form id="emptylegform" action="http://jetbookingdirect.com/wp-content/themes/jetbook2012/emptylegsubmit.php" method="post">

        <textarea id="details" name="details">5th March        Location: Hannover (EDDV)         Destination: Le Bourget (LFPB)        

        

        </textarea>

        <fieldset class="row">

        <p>Check the info above to make sure this is a flight you want. If it is, just tell us your name and number, hit submit and we'll receive your enquiry and get back to you.</p>

        </fieldset>

        <fieldset class="row emptyrowtop"><label for="name">Your Name:</label><input type="text" id="name" name="name" required></fieldset>

        <fieldset class="row emptyrowbottom"><label for="number">Your Number:</label><input type="text" id="number" name="number" required></fieldset>

        <fieldset class="row submitrow"><input type="submit" value=""></fieldset>

    </form></td>
</tr>

<tr class="parent">
    <td class="date"><strong>5th March </strong></td>

    <td>Location: Hannover (EDDV) </td>                    <td>Destination: Le Bourget (LFPB) </td>                    <td class="pax">Number of seats: 9 </td>                   

       <td class="date"><h2 class="h2book active">Book Now</h2></td> 
</tr>

    

<tr class="child">


 
       <td><form id="emptylegform" action="http://jetbookingdirect.com/wp-content/themes/jetbook2012/emptylegsubmit.php" method="post">

        <textarea id="details" name="details">5th March        Location: Hannover (EDDV)         Destination: Le Bourget (LFPB)        

        

       ...

CSS

table.emptylegtable, table.emptylegtable tr{float:left;}
table.emptylegtable td {width:140px;padding:5px;}
table.emptylegtable td.date {width:60px;}
table.emptylegtable td.book {width:110px;}
table.emptylegtable td.pax {width:100px;}

JavaScript

$('tr.child').hide();
  $('h2').click(function() {
    $(this).hide()
    .next('tr.child').fadeIn();
    return false;
  });