Я пытаюсь найти лучший (самый простой) способ реализовать слайд панели сортировки при щелчке по ссылке ....
В основном, есть серия div, и мне бы хотелось, чтобы каждыйодин, чтобы выдвинуть панель справа, позволяя добавить и сохранить информацию, затем она сдвинет панель ...
Текущая информация отображается (работает) в приведенном ниже коде.Это отображает 4 столбца в то время как на ПК и только 2 в телефоне, что я хотел бы сохранить.
Предполагается, что если вы нажмете на Engine 1 или Engine 2 (или фактическую тягу базы данных)', затем вы получаете наложение страницы, которое позволяет вам заполнить форму и отправить ее.
Я мог бы просто загрузить другую страницу ввода данных, но подумал, что это будет немного элегантнее.
Причина, по которой панель была на полпути вниз, заключалась в том, что я экспериментировал. Имена панелей ...
<div class="container">
<h2></h2>
<div class="row">
<div class="panel panel-default">
<div class="panel-heading">Vessel Information for <?php echo $vesseldata['vesselTag']?></div>
<div class="panel-body" >
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-3"><b>Vessel Details</b></div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-3">Type of Vessel</div><div class="col-xs-6 col-sm-6 col-md-3"><?php echo $basespec['newname'];?></div>
<div class="col-xs-6 col-sm-6 col-md-3">Design Reference</div><div class="col-xs-6 col-sm-6 col-md-3"><?php echo $vesseldata['DesignRef'];?></div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-3">Ordering Dealer</div><div class="col-xs-6 col-sm-6 col-md-3"><?php $OrderingDealer= array_column($OrderingDealers, 'name', 'id'); echo $OrderingDealer[$vesseldata['OrderingDealer']];?></div>
<div class="col-xs-6 col-sm-6 col-md-3">Hull Number</div><div class="col-xs-6 col-sm-6 col-md-3"><?php echo $vesseldata['HullNo'];?></div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-3">Hull Colour</div><div class="col-xs-6 col-sm-6 col-md-3"><?php echo $vesseldata['HullColour'];?></div>
<div class="col-xs-6 col-sm-6 col-md-3">Topside Colour</div><div class="col-xs-6 col-sm-6 col-md-3"><?php echo $vesseldata['TopsideColour'];?></div>
</div>
<div class="row"><div><br></div>
<div class="col-xs-6 col-sm-6 col-md-3"><b>Build Dates</b></div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-3">Build Complete</div><div class="col-xs-6 col-sm-6 col-md-3"><?php echo $vesseldata['BuildDate'];?></div>
<div class="col-xs-6 col-sm-6 col-md-3">Commission Complete</div><div class="col-xs-6 col-sm-6 col-md-3"><?php echo $vesseldata['CommissionDate'];?></div>
</div>
</div>
<div class="panel-body">
<div class="row"><div></div>
<div class="col-xs-6 col-sm-6 col-md-3"><b>Build Options</b></div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-3" id="engine1">Engine 1</div><div class="col-xs-6 col-sm-6 col-md-3"><?php $option= array_column($options, 'name', 'id'); echo $option[$vesseldata['Engine1Type']];?></div>
<div class="col-xs-6 col-sm-6 col-md-3">Engine 1 Serial</div><div class="col-xs-6 col-sm-6 col-md-3"><?php echo $vesseldata['Engine1Number'];?></div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-3">Engine 2</div><div class="col-xs-6 col-sm-6 col-md-3"><?php $option= array_column($options, 'name', 'id'); echo $option[$vesseldata['Engine2Type']];?></div>
<div class="col-xs-6 col-sm-6 col-md-3">Engine 2 Serial</div><div class="col-xs-6 col-sm-6 col-md-3"><?php echo $vesseldata['Engine1Number'];?></div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-3">Stern Drive 1</div><div class="col-xs-6 col-sm-6 col-md-3"><?php $option= array_column($options, 'name', 'id'); echo $option[$vesseldata['SternDrive1Type']];?></div>
<div class="col-xs-6 col-sm-6 col-md-3">Stern Drive 1 Serial</div><div class="col-xs-6 col-sm-6 col-md-3"><?php echo $vesseldata['SternDrive1Number'];?></div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-3">Stern Drive 2</div><div class="col-xs-6 col-sm-6 col-md-3"><?php $option= array_column($options, 'name', 'id'); echo $option[$vesseldata['SternDrive2Type']];?></div>
<div class="col-xs-6 col-sm-6 col-md-3">Stern Drive 2 Serial</div><div class="col-xs-6 col-sm-6 col-md-3"><?php echo $vesseldata['SternDrive2Number'];?></div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-3">Generator</div><div class="col-xs-6 col-sm-6 col-md-3"><?php $option= array_column($options, 'name', 'id'); echo $option[$vesseldata['Genset1Type']];?></div>
<div class="col-xs-6 col-sm-6 col-md-3">Generator Serial</div><div class="col-xs-6 col-sm-6 col-md-3"><?php echo $vesseldata['Genset1Number'];?></div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-3">Air Conditioning</div><div class="col-xs-6 col-sm-6 col-md-3"><?php $option= array_column($options, 'name', 'id'); echo $option[$vesseldata['Aircon1Type']];?></div>
<div class="col-xs-6 col-sm-6 col-md-3">Air Conditioning Serial</div><div class="col-xs-6 col-sm-6 col-md-3"><?php echo $vesseldata['Aircon1Number'];?></div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-3">Teak Pack</div><div class="col-xs-6 col-sm-6 col-md-3"><?php $option= array_column($options, 'name', 'id'); echo $option[$vesseldata['TeakPack']];?></div>
<div class="col-xs-6 col-sm-6 col-md-3">Teak Cork Batch</div><div class="col-xs-6 col-sm-6 col-md-3"><?php echo $vesseldata['TeakCorkBatch'];?></div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-3">Layout</div><div class="col-xs-6 col-sm-6 col-md-3"><?php $option= array_column($options, 'name', 'id'); echo $option[$vesseldata['Layout']];?></div>
<div class="col-xs-6 col-sm-6 col-md-3">Interior Décor</div><div class="col-xs-6 col-sm-6 col-md-3"><?php $option= array_column($options, 'name', 'id'); echo $option[$vesseldata['Interior']];?></div>
</div>
</div>
</div>
</div>
</div>```