Magento – Magento Onepage checkout horizontal Design

Hi 'm working on the magento responsive theme using bootstrap.

In my onepage Checkout page, i need to customize that as horizontal listing.

I have followed some tutorial. But in those tutorial they have use
fixed height for that.I don't want to use like that.

So i have tried in app\design\frontend\default\default\template\checkout\onepage.phtml as follow

<div class="row-fluid steps">
<?php $i=0; foreach($this->getSteps() as $_stepId => $_stepInfo): ?>
<?php if (!$this->getChild($_stepId) || !$this->getChild($_stepId)->isShow()): continue; endif; $i++ ?>
    <div id="opc-<?php echo $_stepId ?>1" class="span3 section<?php echo !empty($_stepInfo['allow'])?' allow':'' ?><?php echo !empty($_stepInfo['complete'])?' saved':'' ?>">
        <div class="step-title">
            <b class="number"><?php echo $i ?></b>
            <?php echo $_stepInfo['label'] ?>
        </div>
    </div>
<?php endforeach ?>
</div>

<ul class="unstyled opc" id="checkoutSteps">
<?php $i=0; foreach($this->getSteps() as $_stepId => $_stepInfo): ?>
<?php if (!$this->getChild($_stepId) || !$this->getChild($_stepId)->isShow()): continue; endif; $i++ ?>
    <li id="opc-<?php echo $_stepId ?>" class="section<?php echo !empty($_stepInfo['allow'])?' allow':'' ?><?php echo !empty($_stepInfo['complete'])?' saved':'' ?>">
        <div class="step-title">
        </div>
        <ul id="checkout-step-<?php echo $_stepId ?>" class="step a-item unstyled cart-list" style="display:none;">
            <li>
                <h3> <?php echo $_stepInfo['label'] ?></h3>
            </li>
            <li class="row-fluid"><?php echo $this->getChildHtml($_stepId) ?></li>
        </ul>
    </li>
<?php endforeach ?>
</ul>

This code display 'll display as i want. But the Accordion was not
working.

Can some one explain to do this.

I don't want to install extension for this.