Bootstrap - Collapsible / Accordion
3' part accordion
Nedenfor kode til en effektiv accordion fra 3'part. Kan tilsyneladende uden problemer anvendes sammen med Bootstrap.
<div id='accordion'> --- </div> indsættes udenom hele den kodeblok, der skal levere data til harmonikaen. (Linker til jquery-eventet)
accordion-toggle indsættes i harmonikaens header-linie.
<div class='accordion-content'> --- </div> indsættes udenom harmonikaens body-del.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
|
<!-- JS -->
<script type="text/javascript">
$(document).ready(function($) {
$('#accordion').find('.accordion-toggle').click(function(){
//Expand or collapse this panel
$(this).next().slideToggle('fast');
//Hide the other panels
$(".accordion-content").not($(this).next()).slideUp('fast');
});
});
</script>
|
<!-- CSS -->
<style>
.accordion-toggle {cursor: pointer;}
.accordion-content {display: none;}
.accordion-content.default {display: block;}
</style>
|
<?php
$query2 = "select * from stammenu order by stm_niveau01, stm_niveau02, stm_niveau03, stm_niveau04 asc ";
$result2 = mysqli_query($db_link, $query2) or die(mysqli_error($db_link));
echo "<div id='accordion'>";
while ($row2 = mysqli_fetch_assoc ($result2))
{
$kat = $row2['stm_niveau01']. " | ". $row2['stm_niveau02']. " | ". $row2['stm_niveau03']. " | " . $row2['stm_niveau04']."<br />";
echo "<span class ='bgfg accordion-toggle'>" .$kat . "</span>";
$query3 = "select dok_titel, dok_fil from dokstam where fk_doty_id = $row2[stm_id]";
$result3 = mysqli_query($db_link, $query3) or die(mysqli_error($db_link));
echo "<div class='accordion-content'>";
while ($row3 = mysqli_fetch_assoc ($result3))
{
$dokfil = $row3['dok_fil'];
$file_dest = "'$dok_site$dokfil.'";
$doknavn = " ,'navn' ";
// $slet_dok ='.$doknavn.'.close();
$slet_dok ="navn.close();";
echo '<button class="btn btn-success btn-xs" onClick=" window.open(' . $file_dest. $doknavn . ' )" >Vis dok.</button> ';
echo $row3['dok_titel']. "<br />";
} // while 3
echo "</div>"; // slut accordion-content
} //while 2
echo "</div>"; // slut accordion
?>
|
|