Jayden_Blade Posted December 1, 2013 Share Posted December 1, 2013 Ok I am lost .... again . I can't seem to get this right . They appear but do not openĀ <script type="text/javascript"> (function($) { $(document).ready(function () { /*-------------------- EXPANDABLE PANELS ----------------------*/ var panelspeed = 500; //panel animate speed in milliseconds var totalpanels = 3; //total number of collapsible panels var defaultopenpanel = 0; //leave 0 for no panel open var accordian = false; //set panels to behave like an accordian, with one panel only ever open at once var panelheight = new Array(); var currentpanel = defaultopenpanel; var iconheight = parseInt($('.icon-close-open').css('height')); var highlightopen = true; //Initialise collapsible panels function panelinit() { for (var i=1; i<=totalpanels; i++) { panelheight[i] = parseInt($('#cp-'+i).find('.expandable-panel-content').css('height')); $('#cp-'+i).find('.expandable-panel-content').css('margin-top', -panelheight[i]); if (defaultopenpanel == i) { $('#cp-'+i).find('.icon-close-open').css('background-position', '0px -'+iconheight+'px'); $('#cp-'+i).find('.expandable-panel-content').css('margin-top', 0); } } } $('.expandable-panel-heading').click(function() { var obj = $(this).next(); var objid = parseInt($(this).parent().attr('ID').substr(3,2)); currentpanel = objid; if (accordian == true) { resetpanels(); } if (parseInt(obj.css('margin-top')) <= (panelheight[objid]*-1)) { obj.clearQueue(); obj.stop(); obj.prev().find('.icon-close-open').css('background-position', '0px -'+iconheight+'px'); obj.animate({'margin-top':0}, panelspeed); if (highlightopen == true) { $('#cp-'+currentpanel + ' .expandable-panel-heading').addClass('header-active'); } } else { obj.clearQueue(); obj.stop(); obj.prev().find('.icon-close-open').css('background-position', '0px 0px'); obj.animate({'margin-top':(panelheight[objid]*-1)}, panelspeed); if (highlightopen == true) { $('#cp-'+currentpanel + ' .expandable-panel-heading').removeClass('header-active'); } } }); function resetpanels() { for (var i=1; i<=totalpanels; i++) { if (currentpanel != i) { $('#cp-'+i).find('.icon-close-open').css('background-position', '0px 0px'); $('#cp-'+i).find('.expandable-panel-content').animate({'margin-top':-panelheight[i]}, panelspeed); if (highlightopen == true) { $('#cp-'+i + ' .expandable-panel-heading').removeClass('header-active'); } } } } $(window).load(function() { panelinit(); }); //END LOAD }); //END READY })(jQuery); </script> <div id="container"> <div class="expandable-panel" id="cp-1"> <div class="expandable-panel-heading"> <h2 align="center">About Me<span class="icon-close-open"></span></h2> </div> <div class="expandable-panel-content"> <p align="center"><?php echo $aboutme; ?></p> </div> </div> <div class="expandable-panel" id="cp-2"> <div class="expandable-panel-heading"> <h2 align="center">Interests/Hobbies<span class="icon-close-open"></span></h2> </div> <div class="expandable-panel-content"> <p align="center"><?php echo $interests; ?></p> </div> </div> <div class="expandable-panel" id="cp-3"> <div class="expandable-panel-heading"> <h2 align="center">Anything else<span class="icon-close-open"></span></h2> </div> <div class="expandable-panel-content"> <p align="center"><?php echo $anythingelse; ?></p> </div> </div> </div> /* Classes */ body { background-color:000000; } a:link, a:hover, a:visited, a:active { color: #0055FF; font-weight: bold; text-decoration: none; } .textcenter { text-align: center; } #textcenter { text-align: center; } #wrap .statusmsg{ font-size: 12px; /* Set message font size */ padding: 3px; /* Some padding to make some more space for our text */ background: #EDEDED; /* Add a background color to our status message */ border: 1px solid #DFDFDF; /* Add a border arround our status message */ } .left { position:relative; left:0px; } .right { position:relative; right:0px; left:800px; } .center { margin:auto; width:70%; background-color:#000000; } /* ID's */ #h2{ font-size:22px; } #mission { font-size:22px; } #info_wrapper { width: 1100px; margin: auto; background-color:000000; color: #992299; } #table1 { color: #992299; width: 1100px; } #table2 { color: #992299; } #height1 { height: 45px; } h2, p, ol, ul, li { margin:0px; padding:0px; font-size:13px; font-family:Arial, Helvetica, sans-serif; } #container { width:300px; margin:auto; margin-top:100px; } /* --------- COLLAPSIBLE PANELS ----------*/ .expandable-panel { width:100%; position:relative; min-height:50px; overflow:auto; margin-bottom: 20px; border:1px solid #999; } .expandable-panel-heading { width:100%; cursor:pointer; min-height:50px; clear:both; background-color:#E5E5E5; position:relative; } .expandable-panel-heading:hover { color:#666; } .expandable-panel-heading h2 { padding:14px 10px 9px 15px; font-size:18px; line-height:20px; } .expandable-panel-content { padding:0 15px 0 15px; margin-top:-999px; } .expandable-panel-content p { padding:4px 0 6px 0; } .expandable-panel-content p:first-child { padding-top:10px; } .expandable-panel-content p:last-child { padding-bottom:15px; } .icon-close-open { width:20px; height:20px; position:absolute; background-image:url(icon-close-open.png); right:15px; } .header-active { background-color:#D0D7F3; } sorry i know my css needs organized Link to comment Share on other sites More sharing options...
Jayden_Blade Posted December 2, 2013 Author Share Posted December 2, 2013 bump Link to comment Share on other sites More sharing options...
Ch0cu3r Posted December 2, 2013 Share Posted December 2, 2013 This a forum for PHP Help not Javascript Link to comment Share on other sites More sharing options...
Recommended Posts