<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"><h1>Accordian Builder</h1> <?php $items = $_POST['item']; if(empty($items)): ?> <div class="wrapper"> <form action="" method="post"> <?php for($i = 1; $i <= 10; $i++){ ?> <p>TITLE: <input type="text" name="item[<?php echo $i; ?>][title]"></p> <p>TEXT: <textarea name="item[<?php echo $i; ?>][text]" cols="30" rows="10"></textarea></p> <hr /> <?php }?> <p><input type="submit" name="submit"></p> </form> </div><!-- /wrapper --> <?php endif; ?> <div class="wrapper"> <?php if(!empty($items)): ob_start();?><div class="panel-group" id="accordion"><?php foreach($items as $itemKey => $item): if(empty($item['title'])) continue; ?> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse<?php echo $itemKey; ?>"> <?php echo $item['title']; ?> </a> </h4> </div> <div id="collapse<?php echo $itemKey; ?>" class="panel-collapse collapse <?php if($itemKey == 1) { echo 'in'; } ?>"> <div class="panel-body"> <?php echo $item['text']; ?> </div> </div> </div><!-- /panel --> <?php endforeach;?> </div><!-- /panel group --> <?php $code = ob_get_clean(); if(!empty($code)){ echo $code; echo '<strong>Code</strong><br>'; echo '<pre style="text-align:left; ">'.htmlentities($code).'</pre>'; } endif; ?> </div><!-- /wrapper --> </div><!-- /container -->

.wrapper { margin:20px auto; width:900px; background:#ddd; color:#333; border:#999; text-align:center; } .wrapper input { width:50%; height:30px; } .wrapper textarea { width:50%; height:150px; } p:first-of-type { padding-top:50px; } input[name=submit] { margin-bottom:50px; height:50px; }