html - Hidden table row does not display where it is supposed to -
this supposed display additional information in hidden row each row in table.
the problem is, not being displayed under row rather above table. if select row 3 view additional information, hidden row should appear under instead appearing on top of rows.
i'm guessing there's wrong table structure can't figure out what.
and here's jsfiddle
<link rel="stylesheet" type="text/css" href="http://drvic10k.github.io/bootstrap-sortable/contents/bootstrap-sortable.css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script src="http://drvic10k.github.io/bootstrap-sortable/scripts/bootstrap-sortable.js"></script> <script src="http://drvic10k.github.io/bootstrap-sortable/scripts/moment.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $(".slidingdiv").hide(); $(".show_hide").show(); $('.show_hide').click(function(){ $(".slidingdiv").slidetoggle(); }); }); </script> <div class="box"> <div class="box-header"> <h3 class="box-title">view listings</h3> <div class="box-tools"> <div class="input-group"> <input type="text" name="table_search" class="form-control input-sm pull-right" style="width: 150px;" placeholder="search"> <div class="input-group-btn"> <button class="btn btn-sm btn-default"><i class="fa fa-search"></i></button> </div> </div> </div> </div><!-- /.box-header --> <div class="box-body table-responsive no-padding"> <table class="table table-hover table-striped sortable" style="border-collapse:collapse;"> <thead> <tr> <th data-defaultsort="asc" data-sortcolumn="0" data-sortkey="0-1">id</th> <th data-defaultsign="month" data-sortcolumn="1" data-sortkey="1-1">status</th> <th data-sortcolumn="2" data-sortkey="2-1">for</th> <th data-sortcolumn="3" data-sortkey="3-1">availability</th> <th data-mainsort="true" data-sortcolumn="4" data-sortkey="4-1">type<span class="sign arrow"></span></th> <th data-sortcolumn="5" data-sortkey="5-1">contact</th> <th data-sortcolumn="6" data-sortkey="6-1">reference id</th> <th data-sortcolumn="7" data-sortkey="7-1">location</th> <th data-sortcolumn="8" data-sortkey="8-1">category</th> <th data-sortcolumn="9" data-sortkey="9-1">apartment area</th> <th data-sortcolumn="10" data-sortkey="10-1">garden area</th> <th data-sortcolumn="11" data-sortkey="11-1">parking</th> <th data-sortcolumn="12" data-sortkey="12-1">visitors parking</th> <th>action</th> </tr> </thead> <tbody> @foreach($listings $key => $value) <tr data-toggle="collapse" data-target="#{{ $value->id }}" class="accordion-toggle"> <td data-value="{{ $value->id }}">{{ $value->id }}</td> <td data-value="{{ $value->status }}">{{ $value->status }}</td> <td data-value="{{ $value->listingfor }}">{{ $value->listingfor }}</td> <td data-value="{{ $value->propertystatus }}">{{ $value->propertystatus }}</td> <td data-value="{{ $value->propertytype }}">{{ $value->propertytype }}</td> <td data-value="{{ $value->contact_id }}">{{ $value->contact_id }}</td> <td data-value="{{ $value->reference_id }}">{{ $value->reference_id }}</td> <td data-value="{{ $value->location }}">{{ $value->location }}</td> <td data-value="{{ $value->category }}">{{ $value->category }}</td> <td data-value="{{ $value->apartment_area }}">{{ $value->apartment_area }}</td> <td data-value="{{ $value->garden_area }}">{{ $value->garden_area }}</td> <td data-value="{{ $value->parking }}">{{ $value->parking }}</td> <td data-value="{{ $value->visitors_parking }}">{{ $value->visitors_parking }}</td> <td><a class="btn btn-small btn-success" href="{{ url::to('listings/view/' . $value->id) }}">show</a> <a class="btn btn-small btn-info" href="{{ url::to('listings/view/' . $value->id . '/edit') }}">edit</a> <a class="btn btn-small btn-danger" href="{{ url::to('listings/view/' . $value->id . '/delete') }}">delete</a></td> <tr> <td colspan="14" class="hiddenrow"> <div class="accordian-body collapse" id="{{ $value->id }}"> <p>lifestyle: {{ $value->lifestyle }}</p> </div> </td> </tr> </tr> @endforeach </tbody> </table> </div><!-- /.box-body --> </div>
you forgot close <tr> tag before starting new row.
@foreach($listings $key => $value) <tr data-toggle="collapse" data-target="#{{ $value->id }}" class="accordion-toggle"> <td> <table> <tr> <td data-value="{{ $value->id }}">{{ $value->id }}</td> <td data-value="{{ $value->status }}">{{ $value->status }}</td> <td data-value="{{ $value->listingfor }}">{{ $value->listingfor }}</td> <td data-value="{{ $value->propertystatus }}">{{ $value->propertystatus }}</td> <td data-value="{{ $value->propertytype }}">{{ $value->propertytype }}</td> <td data-value="{{ $value->contact_id }}">{{ $value->contact_id }}</td> <td data-value="{{ $value->reference_id }}">{{ $value->reference_id }}</td> <td data-value="{{ $value->location }}">{{ $value->location }}</td> <td data-value="{{ $value->category }}">{{ $value->category }}</td> <td data-value="{{ $value->apartment_area }}">{{ $value->apartment_area }}</td> <td data-value="{{ $value->garden_area }}">{{ $value->garden_area }}</td> <td data-value="{{ $value->parking }}">{{ $value->parking }}</td> <td data-value="{{ $value->visitors_parking }}">{{ $value->visitors_parking }}</td> <td><a class="btn btn-small btn-success" href="{{ url::to('listings/view/' . $value->id) }}">show</a> <a class="btn btn-small btn-info" href="{{ url::to('listings/view/' . $value->id . '/edit') }}">edit</a> <a class="btn btn-small btn-danger" href="{{ url::to('listings/view/' . $value->id . '/delete') }}">delete</a> </td> </tr> <tr> <th colspan="14" class="hiddenrow"> <div class="accordian-body collapse" id="{{ $value->id }}"> <p>lifestyle: {{ $value->lifestyle }}</p> </div> </th> </tr> </table> </td> </tr> @endforeach
Comments
Post a Comment