Customizing Jquery UI Accordion

Question

When I use Accordion, the display is coming in entire page. I want to adjust the width and height of the display.

I want my accordion to have width as shown in http://www.i-marco.nl/weblog/jquery-accordion-3/

The example in above link is done in JQuery....I do not want to use it...I want to customise what is available in Jquery UI

Answer 1

You can create custom accordion:

	$('.accordionOm').next().hide();
	$(".opened").next().show();
	$('.accordionOm').click(function()
	{
		if($(this).hasClass("opened") == true)
		{
			$(this).next().slideUp("slow");
			$(this).removeClass('opened');
		}
		else
		{
			$(".opened").next().slideUp("slow");
			$(".opened").removeClass("opened");
			$(this).addClass('opened');
			$(this).next().slideDown("slow");
		}
	});

.accordionOm { position:relative; padding:10px 0 10px 30px; margin:0; font:300 18px 'Oswald', Arial, Helvetica, sans-serif; cursor:pointer;}
.accordionOm:hover { color:#000;}
.accordionOm:before,.accordionOm:after { content:""; position:absolute; background:#333; display:inline-block;}
.accordionOm:before { width:20px; height:2px; left:0; top:22px;}
.accordionOm:after { width:2px; height:20px; left:9px; top:13px; transition:transform .5s; transform:rotate(0);}
.accordionOm.opened:after { transform:rotate(90deg);}
.accordionOm + div { border-left:4px solid #999; padding:0 15px; margin-left:8px; font:13px 'Open Sans', Arial, Helvetica, sans-serif; color:#666;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4 class="accordionOm opened">Accordian heading</h4>
<div>
	<p>Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.</p>
</div>

<h4 class="accordionOm">Accordian heading</h4>
<div>
	<p>Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.</p>
</div>

<h4 class="accordionOm">Accordian heading</h4>
<div>
	<p>Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.</p>
</div>

<h4 class="accordionOm">Accordian heading</h4>
<div>
	<p>Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.</p>
</div>

Answer 2

Your 'display is coming in entire page'? Did you try giving your div a css width and height? Otherwise you should post your code because your question is vague.