function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
sathishsfdcsathishsfdc 

apextab not working when jquery is implemented in the page

Is there any alternative for using apextab with jquey.I created a simple page with jquery and apextab and the tab was not working,
I tried to use jQuery.noConflict();  and that also did not work.Please find the code below
<!-- For this example to render properly, you must associate the Visualforce page 
with a valid account record in the URL. 
For example, if 001D000000IRt53 is the account ID, the resulting URL should be: 
https://Salesforce_instance/apex/myPage?id=001D000000IRt53
See the Visualforce Developer's Guide Quick Start Tutorial for more information. -->
                    
<!-- This example shows how to use the tabClass and inactiveTabClass attributes to
change the default styling of the tab bar. Note that in the style definitions,
'background-image:none' is required to override the default image with the
specified color. You can also provide your own image with .css styles. -->
            
<apex:page standardController="Account" showHeader="true">
      <apex:form >
        <!-- Define Tab panel .css styles -->
    <style>
    .activeTab {background-color: #236FBD; color:white; background-image:none}
    .inactiveTab { background-color: lightgrey; color:black; background-image:none}
    </style>
            
   <!--     <script type="text/javascript" language="javascript">
    if(jQuery) {
        jQuery.noConflict();
        alert('hi');
    }
</script> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<!--<script>
$(document).ready(function(){
    $("p").click(function(){
        alert("The paragraph was clicked.");
    });
});
</script>

        <p>Click on this paragraph.</p>
-->

            
    <!-- Create Tab panel -->
    <apex:tabPanel switchType="client"  id="AccountTabPanel"
        tabClass="activeTab" inactiveTabClass="inactiveTab">
        <apex:tab label="One" name="name1" id="tabOne">content for tab one
        
<apex:page standardController="Account">

        <apex:pageBlock title="My Content" mode="edit">
            <apex:pageBlockButtons >
                <apex:commandButton action="{!save}" value="Save"/>
            </apex:pageBlockButtons>
            <apex:pageBlockSection title="My Content Section" columns="2">
                <apex:inputField value="{!account.name}"/>
                <apex:inputField value="{!account.site}"/>
            </apex:pageBlockSection>
        </apex:pageBlock>
   
</apex:page>
        
        
        </apex:tab>
        <apex:tab label="Two" name="name2" id="tabTwo">
   
        <apex:pageBlock title="My Content" mode="edit">
            <apex:pageBlockButtons >
                <apex:commandButton action="{!save}" value="Save"/>
            </apex:pageBlockButtons>
            <apex:pageBlockSection title="My Content Section" columns="2">
                <apex:inputField value="{!account.type}"/>
                <apex:inputField value="{!account.accountNumber}"/>
            </apex:pageBlockSection>
        </apex:pageBlock>

        content for tab two</apex:tab>
    </apex:tabPanel>
        </apex:form>
</apex:page>

 
Best Answer chosen by sathishsfdc
☯ BonY ☯☯ BonY ☯
Hi Sathis,

try below code
 
<!-- For this example to render properly, you must associate the Visualforce page 
with a valid account record in the URL. 
For example, if 001D000000IRt53 is the account ID, the resulting URL should be: 
https://Salesforce_instance/apex/myPage?id=001D000000IRt53
See the Visualforce Developer's Guide Quick Start Tutorial for more information. -->
                    
<!-- This example shows how to use the tabClass and inactiveTabClass attributes to
change the default styling of the tab bar. Note that in the style definitions,
'background-image:none' is required to override the default image with the
specified color. You can also provide your own image with .css styles. -->
            
<apex:page standardController="Account" showHeader="true">
      <apex:form >
        <!-- Define Tab panel .css styles -->
    <style>
    .activeTab {background-color: #236FBD; color:white; background-image:none}
    .inactiveTab { background-color: lightgrey; color:black; background-image:none}
    </style>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
jQuery.noConflict();
jQuery(function ($) {
    $("p").click(function(){
        alert("The paragraph was clicked.");
    });
});
</script>

        <p>Click on this paragraph.</p>

            
    <!-- Create Tab panel -->
    <apex:tabPanel switchType="client"  id="AccountTabPanel"
        tabClass="activeTab" inactiveTabClass="inactiveTab">
        <apex:tab label="One" name="name1" id="tabOne">content for tab one
        
<apex:page standardController="Account">

        <apex:pageBlock title="My Content" mode="edit">
            <apex:pageBlockButtons >
                <apex:commandButton action="{!save}" value="Save"/>
            </apex:pageBlockButtons>
            <apex:pageBlockSection title="My Content Section" columns="2">
                <apex:inputField value="{!account.name}"/>
                <apex:inputField value="{!account.site}"/>
            </apex:pageBlockSection>
        </apex:pageBlock>
   
</apex:page>
        
        
        </apex:tab>
        <apex:tab label="Two" name="name2" id="tabTwo">
   
        <apex:pageBlock title="My Content" mode="edit">
            <apex:pageBlockButtons >
                <apex:commandButton action="{!save}" value="Save"/>
            </apex:pageBlockButtons>
            <apex:pageBlockSection title="My Content Section" columns="2">
                <apex:inputField value="{!account.type}"/>
                <apex:inputField value="{!account.accountNumber}"/>
            </apex:pageBlockSection>
        </apex:pageBlock>

        content for tab two</apex:tab>
    </apex:tabPanel>
        </apex:form>
</apex:page>