I have a single-page application that is meant to display certain information when people click on a jQuery UI accordion to the left. If I set an initial "display: none" in the CSS for a page or call jQuery(selector).hide(), it seems not to be showable after that point, at least not using jQuery(selector).show(). Debugging statements confirm that the selector it is using is in fact the one intended, but nothing shows.What am I doing that neutralizes jQuery's ability to show() a DIV?TIA,\[code\]<!DOCTYPE html><html> <head> <meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1' /> <title>Anonymous</title> <link type='text/css' href='http://stackoverflow.com/questions/11547139/css/ui-lightness/jquery-ui-1.8.21.custom.css' rel='stylesheet' /> <script type='text/javascript' src='http://stackoverflow.com/questions/11547139/js/jquery-1.7.2.min.js'></script> <script type='text/javascript' src='http://stackoverflow.com/questions/11547139/js/jquery-ui-1.8.21.custom.min.js'></script> <script type='text/javascript'> var agency; var current_program; var permitted = Object(); permitted['Anonymous1.User1'] = ['Program1']; permitted['Anonymous1.User2'] = ['Program1']; permitted['Anonymous1.User3'] = ['Program1', 'Program3']; permitted['Anonymous1.User4'] = ['Program1', 'Program2', 'Program3']; permitted['Anonymous2'] = ['Program1']; permitted['Anonymous3'] = ['Program1']; permitted['Anonymous4'] = ['Program1', 'Program3', 'Program2']; permitted['Anonymous6'] = ['Program1', 'Program2', 'Program3', 'Report5']; permitted['Anonymous5.Anonymous5r'] = ['Program1', 'Program2']; permitted['Anonymous5.User4'] = ['Program1', 'Program2', 'Program3']; jQuery(function(){ // Accordion jQuery('#accordion').accordion({ header: 'h3' }); jQuery('.page').hide(); jQuery('.login').click(function(event_object) { current_program = event_object.target.id; current_program = current_program.replace('-', ' '); jQuery('#login-form').show(); jQuery('#login-form h3').html(current_program); }); jQuery('#login-button').click(function(event_object) { jQuery('#login-form').hide(); agency = jQuery('#login-form h3').html(); var key = null; if (jQuery.inArray(agency, permitted)) { key = agency; } else if (jQuery.inArray(agency + '.' + jQuery('#login-name').val())) { key = agency + '.' + jQuery('#login-name').val(); } if (key) { var user_permissions = permitted[key]; if (user_permissions.length == 1) { load_page(user_permissions[0]); } else { load_blank_permissions_page(); for (var index = 0; index < user_permissions.length; ++index) { display_link(user_permissions[index]); } } } return false; }); }); function display_link(drilldown) { var html_id = drilldown.replace(' ', '-'); jQuery('#' + html_id).show(); } function load_blank_permissions_page() { jQuery('#links-page span').hide(); jQuery('#links-page h3').html(agency + ' Options'); jQuery('#links-page').css('display', 'block'); jQuery('#links-page').show(); } function load_page(drilldown) { var html_id = drilldown.replace(' ', '-'); jQuery('.page').hide(); jQuery('#' + html_id).show(); } </script> <style type='text/css'> body{ font-family: 'Verdana', sans-serif; margin: 50px;} div#accordion { float: left; position: absolute; width: 18%; } div.page { margin-left: 20%; } </style> </head> <body> <h1>Anonymous</h1> <div id='accordion'> <div> <h3><a href='http://stackoverflow.com/questions/11547139/#'>Demo</a></h3> <p> <a class='login' id='Anonymous2' href='http://stackoverflow.com/questions/11547139/#'>Anonymous2</a><br /> <a class='login' id='Anonymous1' href='http://stackoverflow.com/questions/11547139/#'>Anonymous1</a><br /> <a class='login' id='Anonymous3' href='http://stackoverflow.com/questions/11547139/#'>Anonymous3</a><br /> <a class='login' id='Anonymous4' href='http://stackoverflow.com/questions/11547139/#'>Anonymous4</a><br /> <a class='login' id='Anonymous5' href='http://stackoverflow.com/questions/11547139/#'>Anonymous5</a><br /> </p> </div> <div> <h3><a href='http://stackoverflow.com/questions/11547139/#'>Use Cases</a></h3> <div>Phasellus mattis tincidunt nibh.</div> </div> <div> <h3><a href='http://stackoverflow.com/questions/11547139/#'>Third</a></h3> <div>Nam dui erat, auctor a, dignissim quis.</div> </div> </div> </div> <div class='page' id='login-form'> <h3>Log in</h3> <p><input id='login-name' type='text'> Username<br /> <input id='password' type='password'> Password<br /> <button id='login-button'>Log in</button></p> </div> <div class='page' id='links-page'> <h3>Options</h3> <p> <span id='Program1'><a href='http://stackoverflow.com/questions/11547139/#' id='Program1-link'>Report1</a><br /></span> <span id='Report5'><a href='http://stackoverflow.com/questions/11547139/#' id='Report5-link'>Report5</a><br /></span> <span id='Program2'><a href='http://stackoverflow.com/questions/11547139/#' id='Program2-link'>Report2</a><br /></span> <span id='Program3'><a href='http://stackoverflow.com/questions/11547139/#' id='Program3-link'>Report3</a><br /> </span> </p> </div> <div class='page' id='Program4'> <h3>Program1</h3> <p>...</p> </div> <div class='page' id='Program1'> <h3>Program1</h3> <p>...</p> </div> <div class='page' id='Program2'> <h3>Program2</h3> <p>...</p> </div> <div class='page' id='Program3'> <h3>Program3</h3> <p>...</p> </div> </body></html>\[/code\]
Is there a reason things would not be displaying under jQuery UI?
- Thread starter nukeind
- Start date