+ Start a Discussion
JohanLiljegrenJohanLiljegren 

Ugly jQuery Accordion in Visualforce with standard stylesheets

I'm trying to incorporate a jQuery Accordion (http://jqueryui.com/demos/accordion/) in a Visualforce page but it comes out garbled (see screenshot):

 

Garbled output

 

If I remove the standard stylesheets (standardstylesheets="false") and header (showheader="false") it comes out as I'd want it to (see screenshot):

Nice output

Problem is, I have other things on the page that needs the standard stylesheets.


How would I define the accordion so that it plays nice inside of a standard stylesheets Visualforce page?

I'm thinking I need to override some styles, but I can't figure out what/how.

 

Here's a short version of the page with just the accordion part:

<apex:page cache="false" expires="0" sidebar="false" >
    <apex:includeScript value="{!URLFOR($Resource.jquery, '/js/jquery-1.7.1.min.js')}"  />
    <apex:includeScript value="{!URLFOR($Resource.jquery, '/js/jquery-ui-1.8.18.custom.min.js')}"  />
    <apex:stylesheet value="{!URLFOR($Resource.jquery, '/css/ui-lightness/jquery-ui-1.8.18.custom.css')}"  />

    <script>
        $j = jQuery.noConflict();

        $j(document).ready(function($)
        {
            $j("#SFDCSalesPanel").accordion();
        });
    </script>

    <apex:pageBlock id="playBlock" >
        <div id="SFDCSalesPanel">
            <h3><a href="#">Header 1</a></h3>
            <div>Content 1</div>
            <h3><a href="#">Header 2</a></h3>
            <div>Content 2</div>
            <h3><a href="#">Header 3</a></h3>
            <div>Content 3</div>
        </div>
    </apex:pageBlock>
</apex:page>

 

Best Answer chosen by Admin (Salesforce Developers) 
JohanLiljegrenJohanLiljegren

I figured out how to fix this today by using Google Chrome's built-in "Inspect Element" function.

Basically, I went through and deactivated style after style until I found it.

Apparently, the H3 tag had "display:inline" set - when changing this to "display:inline" the accordion looked beautiful.

 

Here's an updated, working, version of the above code:

<apex:page cache="false" expires="0" sidebar="false" >
    <apex:includeScript value="{!URLFOR($Resource.jquery, '/js/jquery-1.7.1.min.js')}"  />
    <apex:includeScript value="{!URLFOR($Resource.jquery, '/js/jquery-ui-1.8.18.custom.min.js')}"  />
    <apex:stylesheet value="{!URLFOR($Resource.jquery, '/css/ui-lightness/jquery-ui-1.8.18.custom.css')}"  />

    <script>
        $j = jQuery.noConflict();

        $j(document).ready(function($)
        {
            $j("#SFDCSalesPanel").accordion();
        });
    </script>

    <style>
        .accordion
        {
            display:block;
        }
    </style>

    <apex:pageBlock id="playBlock" >
        <div id="SFDCSalesPanel">
            <h3 class="accordion"><a href="#">Header 1</a></h3>
            <div>Content 1</div>
            <h3 class="accordion"><a href="#">Header 2</a></h3>
            <div>Content 2</div>
            <h3 class="accordion"><a href="#">Header 3</a></h3>
            <div>Content 3</div>
        </div>
    </apex:pageBlock>
</apex:page>

 

All Answers

Orn IngvarOrn Ingvar

Hi Johan

 

You could try this on the h3 tag

<h3 style="font-size:12px">

 And this on the div

<div style="font-size:12px">

 If I remember correctly this worked when I did something similar with accordion. Of course you can play with the px size if the font is too small or big.

 

Hope it helps

JohanLiljegrenJohanLiljegren

Thanks for the tip - unfortunately it didn't help.

JohanLiljegrenJohanLiljegren

I figured out how to fix this today by using Google Chrome's built-in "Inspect Element" function.

Basically, I went through and deactivated style after style until I found it.

Apparently, the H3 tag had "display:inline" set - when changing this to "display:inline" the accordion looked beautiful.

 

Here's an updated, working, version of the above code:

<apex:page cache="false" expires="0" sidebar="false" >
    <apex:includeScript value="{!URLFOR($Resource.jquery, '/js/jquery-1.7.1.min.js')}"  />
    <apex:includeScript value="{!URLFOR($Resource.jquery, '/js/jquery-ui-1.8.18.custom.min.js')}"  />
    <apex:stylesheet value="{!URLFOR($Resource.jquery, '/css/ui-lightness/jquery-ui-1.8.18.custom.css')}"  />

    <script>
        $j = jQuery.noConflict();

        $j(document).ready(function($)
        {
            $j("#SFDCSalesPanel").accordion();
        });
    </script>

    <style>
        .accordion
        {
            display:block;
        }
    </style>

    <apex:pageBlock id="playBlock" >
        <div id="SFDCSalesPanel">
            <h3 class="accordion"><a href="#">Header 1</a></h3>
            <div>Content 1</div>
            <h3 class="accordion"><a href="#">Header 2</a></h3>
            <div>Content 2</div>
            <h3 class="accordion"><a href="#">Header 3</a></h3>
            <div>Content 3</div>
        </div>
    </apex:pageBlock>
</apex:page>

 

This was selected as the best answer