Jump to content

expandable panels not working


Jayden_Blade

Recommended Posts

Ok I am lost .... again  :P. I can't seem to get this right  :(. They appear but do not open 


  1. <script type="text/javascript">
  2.  
  3. (function($) {
  4. $(document).ready(function () {
  5. /*-------------------- EXPANDABLE PANELS ----------------------*/
  6. var panelspeed = 500; //panel animate speed in milliseconds
  7. var totalpanels = 3; //total number of collapsible panels
  8. var defaultopenpanel = 0; //leave 0 for no panel open
  9. var accordian = false; //set panels to behave like an accordian, with one panel only ever open at once
  10.  
  11. var panelheight = new Array();
  12. var currentpanel = defaultopenpanel;
  13. var iconheight = parseInt($('.icon-close-open').css('height'));
  14. var highlightopen = true;
  15.  
  16. //Initialise collapsible panels
  17. function panelinit() {
  18. for (var i=1; i<=totalpanels; i++) {
  19. panelheight[i] = parseInt($('#cp-'+i).find('.expandable-panel-content').css('height'));
  20. $('#cp-'+i).find('.expandable-panel-content').css('margin-top', -panelheight[i]);
  21. if (defaultopenpanel == i) {
  22. $('#cp-'+i).find('.icon-close-open').css('background-position', '0px -'+iconheight+'px');
  23. $('#cp-'+i).find('.expandable-panel-content').css('margin-top', 0);
  24. }
  25. }
  26. }
  27.  
  28. $('.expandable-panel-heading').click(function() {
  29. var obj = $(this).next();
  30. var objid = parseInt($(this).parent().attr('ID').substr(3,2));
  31. currentpanel = objid;
  32. if (accordian == true) {
  33. resetpanels();
  34. }
  35.  
  36. if (parseInt(obj.css('margin-top')) <= (panelheight[objid]*-1)) {
  37. obj.clearQueue();
  38. obj.stop();
  39. obj.prev().find('.icon-close-open').css('background-position', '0px -'+iconheight+'px');
  40. obj.animate({'margin-top':0}, panelspeed);
  41. if (highlightopen == true) {
  42. $('#cp-'+currentpanel + ' .expandable-panel-heading').addClass('header-active');
  43. }
  44. } else {
  45. obj.clearQueue();
  46. obj.stop();
  47. obj.prev().find('.icon-close-open').css('background-position', '0px 0px');
  48. obj.animate({'margin-top':(panelheight[objid]*-1)}, panelspeed);
  49. if (highlightopen == true) {
  50. $('#cp-'+currentpanel + ' .expandable-panel-heading').removeClass('header-active');
  51. }
  52. }
  53. });
  54.  
  55. function resetpanels() {
  56. for (var i=1; i<=totalpanels; i++) {
  57. if (currentpanel != i) {
  58. $('#cp-'+i).find('.icon-close-open').css('background-position', '0px 0px');
  59. $('#cp-'+i).find('.expandable-panel-content').animate({'margin-top':-panelheight[i]}, panelspeed);
  60. if (highlightopen == true) {
  61. $('#cp-'+i + ' .expandable-panel-heading').removeClass('header-active');
  62. }
  63. }
  64. }
  65. }
  66.  
  67.  
  68. $(window).load(function() {
  69. panelinit();
  70. }); //END LOAD
  71. }); //END READY
  72. })(jQuery);
  73. </script>
  1. <div id="container">
  2.                 
  3.                     <div class="expandable-panel" id="cp-1">
  4.                 
  5.                         <div class="expandable-panel-heading">
  6.                             <h2 align="center">About Me<span class="icon-close-open"></span></h2>
  7.                         </div>
  8.  
  9.                         <div class="expandable-panel-content">
  10.                             <p align="center"><?php echo $aboutme; ?></p>
  11.                         </div>
  12.                     
  13.                     </div>
  14.  
  15.                     <div class="expandable-panel" id="cp-2">
  16.                     
  17.                         <div class="expandable-panel-heading">
  18.                             <h2 align="center">Interests/Hobbies<span class="icon-close-open"></span></h2>
  19.                         </div>
  20.                         
  21.                         <div class="expandable-panel-content">
  22.                             <p align="center"><?php echo $interests; ?></p>
  23.                         </div>
  24.                     
  25.                     </div>
  26.                     
  27.                     <div class="expandable-panel" id="cp-3">
  28.                         
  29.                         <div class="expandable-panel-heading">
  30.                             <h2 align="center">Anything else<span class="icon-close-open"></span></h2>
  31.                         </div>
  32.                         
  33.                         <div class="expandable-panel-content">
  34.                             <p align="center"><?php echo $anythingelse; ?></p>
  35.                         </div>
  36.                     
  37.                     </div>
  38.                 
  39.                 </div>
  1. /* Classes */
  2.  
  3. body {
  4.     background-color:000000;
  5.  
  6. }
  7.  
  8.  
  9. a:link, a:hover, a:visited, a:active {
  10.     color: #0055FF;
  11.     font-weight: bold;
  12.     text-decoration: none;
  13. }
  14.  
  15. .textcenter {
  16.     text-align: center;
  17. }
  18.  
  19. #textcenter {
  20.     text-align: center;
  21.  
  22.     
  23.     
  24. }
  25.  
  26. #wrap .statusmsg{
  27.     font-size: 12px; /* Set message font size */
  28.     padding: 3px; /* Some padding to make some more space for our text */
  29.     background: #EDEDED; /* Add a background color to our status message */
  30.     border: 1px solid #DFDFDF; /* Add a border arround our status message */
  31. }
  32.  
  33. .left {
  34.     position:relative;
  35.     left:0px;
  36. }
  37.  
  38. .right {
  39.     position:relative;
  40.     right:0px;
  41.     left:800px;
  42. }
  43.  
  44. .center
  45. {
  46. margin:auto;
  47. width:70%;
  48. background-color:#000000;
  49. }
  50.  
  51. /* ID's */
  52. #h2{
  53.     font-size:22px;
  54. }
  55. #mission {
  56.     font-size:22px;
  57. }
  58.  
  59. #info_wrapper {
  60.     width: 1100px;
  61.     margin: auto;
  62.     background-color:000000;
  63.     color: #992299;
  64. }
  65.  
  66. #table1 {
  67.     color: #992299;
  68.     width: 1100px;
  69.  
  70. }
  71.  
  72. #table2 {
  73.     color: #992299;
  74.  
  75. }
  76.  
  77. #height1 {
  78.     height: 45px;
  79.  
  80. }
  81.  
  82.  
  83.  
  84. h2, p, ol, ul, li {
  85. margin:0px;
  86. padding:0px;
  87. font-size:13px;
  88. font-family:Arial, Helvetica, sans-serif;
  89. }
  90.  
  91. #container {
  92. width:300px;
  93. margin:auto;
  94. margin-top:100px;
  95. }
  96.  
  97.  
  98.  
  99. /* --------- COLLAPSIBLE PANELS ----------*/
  100.  
  101.  
  102. .expandable-panel {
  103. width:100%;
  104. position:relative;
  105. min-height:50px;
  106. overflow:auto;
  107. margin-bottom: 20px;
  108. border:1px solid #999;
  109. }
  110. .expandable-panel-heading {
  111. width:100%;
  112. cursor:pointer;
  113. min-height:50px;
  114. clear:both;
  115. background-color:#E5E5E5;
  116. position:relative;
  117. }
  118. .expandable-panel-heading:hover {
  119. color:#666;
  120. }
  121. .expandable-panel-heading h2 {
  122. padding:14px 10px 9px 15px;
  123. font-size:18px;
  124. line-height:20px;
  125. }
  126. .expandable-panel-content {
  127. padding:0 15px 0 15px;
  128. margin-top:-999px;
  129. }
  130. .expandable-panel-content p {
  131. padding:4px 0 6px 0;
  132. }
  133. .expandable-panel-content p:first-child {
  134. padding-top:10px;
  135. }
  136. .expandable-panel-content p:last-child {
  137. padding-bottom:15px;
  138. }
  139. .icon-close-open {
  140. width:20px;
  141. height:20px;
  142. position:absolute;
  143. background-image:url(icon-close-open.png);
  144. right:15px;
  145. }
  146. .header-active {
  147. background-color:#D0D7F3;
  148. }

sorry i know my css needs organized  :P


Link to comment
https://forums.phpfreaks.com/topic/284449-expandable-panels-not-working/
Share on other sites

 

They appear but do not open 

 

again They appear but do not open....

 

java script

<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>

html

<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>

and CSS


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;
}

any help?

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.