Apex Code Development You need to sign in to do that
Don't have an account?
neeedhelp Hide div component by using jQuery in salesforce
<apex:page >
<apex:includeScript value="{!URLFOR($Resource.jquery)}"/>
<script type="text/javascript" >
</script>
<div id="sidebar">
<ul style="display: block;" class="leftnav nav ">
<li class="submenu1 active"><a href="#account" data-toggle="tab"><i class="icon icon-home"></i> <span> Accounts</span></a></li>
<li><a href="#contactandaccount" data-toggle="tab"><i class="icon icon-tasks"></i> <span>Contacts and Accounts</span> </a></li></ul>
<div id="account" class="tab-pane">
<apex:include pageName="formtemplate"/>
</div>
<div id="contactandaccount">
<apex:include pageName="Includetemplate"/>
</div>
</div>
</apex:page>
When I click on Account only "formTemplate" page should be displayed and "IncludeTemplate" page should be hide & vice versa.Any help on this pls
The element you are adding the click handler to is the tab for the account and contact, not the anchor tag to be clicked on.
The following works in my dev org (changes from yours underlined) - I've replaced your page includes with simple text, as I obviously don't know what would be in those:
<div id="sidebar"> <ul style="display: block;" class="leftnav nav "> <li class="submenu1 active"><a id="clickacc" href="#account" data-toggle="tab"><i class="icon icon-home"></i> <span> Accounts</span></a></li> <li><a id="clickcontacc" href="#contactandaccount" data-toggle="tab"><i class="icon icon-tasks"></i> <span>Contacts and Accounts</span> </a></li></ul> <div id="account" class="tab-pane"> Account </div> <div id="contactandaccount"> Account and Contact </div> </div> <script type="text/javascript" > var jQuery = $.noConflict(); jQuery(document).ready(function() { jQuery('#clickacc').click(function(){ jQuery("#contactandaccount").hide(); jQuery("#account").show(); }); jQuery('#clickcontacc').click(function(){ jQuery("#contactandaccount").show(); jQuery("#account").hide(); }); }); </script>All Answers
You'll need to add onclick handlers to your anchor tags. These handlers can use the jquery toggle function to show/hide elements.
There's an example at:
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_toggle
My javascript code is
<script type="text/javascript" > var jQuery = $.noConflict(); jQuery(document).ready(function() { alert("hiiii"); jQuery('#contactandaccount').click(function(){ alert("hellooo"); //never entering here jQuery("contactandaccount").toggle(); }); }); </script>It is not entering into the onclick Event even after clicking on the Contact and Account link. When I run firebug no error is shown in javascript.Dont know why?
Have you checked the javascript console to check there are no errors when setting the page up?
The element you are adding the click handler to is the tab for the account and contact, not the anchor tag to be clicked on.
The following works in my dev org (changes from yours underlined) - I've replaced your page includes with simple text, as I obviously don't know what would be in those:
<div id="sidebar"> <ul style="display: block;" class="leftnav nav "> <li class="submenu1 active"><a id="clickacc" href="#account" data-toggle="tab"><i class="icon icon-home"></i> <span> Accounts</span></a></li> <li><a id="clickcontacc" href="#contactandaccount" data-toggle="tab"><i class="icon icon-tasks"></i> <span>Contacts and Accounts</span> </a></li></ul> <div id="account" class="tab-pane"> Account </div> <div id="contactandaccount"> Account and Contact </div> </div> <script type="text/javascript" > var jQuery = $.noConflict(); jQuery(document).ready(function() { jQuery('#clickacc').click(function(){ jQuery("#contactandaccount").hide(); jQuery("#account").show(); }); jQuery('#clickcontacc').click(function(){ jQuery("#contactandaccount").show(); jQuery("#account").hide(); }); }); </script>