I have a page on which there are two divs of the same sizes, which are located one above the other, each of which contains a jqueryui accordion. One div is visible and the other is hidden. There are also two href's. The first href should show the first div and hide the second (which is the default state), and the second href should show the second div and hide the first. Thus, the user can click on any link and see one accordion or another.
Here is the relevant html:
<html><head> <link href="jquery/css/vp/jquery-ui-1.9.1.custom.min.css" rel="stylesheet" type="text/css" /> <script src="jquery/js/jquery-1.8.2.js"></script> <script src="jquery/js/jquery-ui-1.9.1.custom.min.js"></script> <script src="jquery/development-bundle/external/jquery.bgiframe-2.1.2.js"></script> </head> <body> <div id="pagewrapper" > <div id="mainteam" > <div id="vpteamcontainer"> <div id="accordion"> <h3>Section 1</h3> <div><p>Section 1 Content</p></div> <h3>Section 2</h3> <div><p>Section 2 Content</p></div> </div> </div> <div id="vpadvisorscontainer"> <div id="accordion2"> <h3>Section 1-2</h3> <div><p>Section 1-2 Content</p></div> <h3>Section 2-2</h3> <div><p>Section 2-2 Content</p></div> </div> </div> <div id="somediv"> <ul class = "someULclass"> <li ><a href="#" id="vpteam" class="somelinkclass">Show First div and Hide Second div</a></li> <li ><a href="#" id="vpadvisors" class="somelinkclass">Show Second div and Hide First div</a></li> </ul> </div> </div> </div> </body> </html>
Here is the appropriate CSS for the above DIVS (devoid of width, height, borders, etc.) that I include, because maybe one of the css options of the parent divs can affect divs that I cannot show / hide:
#pagewrapper { position:relative; float:none; margin-left:auto; margin-right:auto; display:block; } #mainteam { position:relative; float: left; } #vpteamcontainer { display:block; } #vpadvisorscontainer { display:none; }
So, I have javascript that calls two accordions (#accordion and # accordion2, and it works fine, and then javascript that tries to show and hide two divs when clicking links: (the code has been edited to try to keep this short):
<script type="text/javascript"> $(function() { $( "#accordion" ).accordion({ collapsible: true, heightStyle: "fill" }); }); </script> <script type="text/javascript"> $(function() { $( "#accordion2" ).accordion({ collapsible: true, heightStyle: "fill" }); }); </script> <script type="text/javascript"> $( "#vpteam" ).click(function(){ $( "#vpteamcontainer" ).show(); $( "#vpadvisorscontainer" ).hide(); }); $( "#vpadvisors" ).click(function(){ $( "#vpteamcontainer" ).hide(); $( "#vpadvisorscontainer" ).show(); }); </script>
Note. I also have javascript to display two modal dialogs displaying the html page in an iframe in a dialog box (jqueryui dialog) called from two separate href links. I saved this from here because it does not seem relevant, except that somewhere around here I saw an element discussing how the fade effect (used when displaying and closing dialogs) has some problem with show / hide).
Results: 1- Accordions are generated in their respective divs and work as expected. 2- The show / hide links do nothing. 3- I tried using .css("display, none") and .css("display. block") , as well as .css("visibility, visible") and .css("visibility, hidden") instead of show() and hide() , and no matter what I do, I cannot get ANY of the options to work.
Perhaps I, too, was too explicit or long in my explanations, and if so, then I apologize.
As I write this, I am wondering if the problem is with the contained accordions or maybe with href links and how am I trying to execute javascripts that show and hide divs?
Thanks to everyone who gives me some suggestion