Jump to content

expandable panels not working

Jayden_Blade

By Jayden_Blade
in Javascript Help

 Share
Go to solution Solved by Jayden_Blade,

Recommended Posts

Jayden_Blade Member

Jayden_Blade

Posted
Posted

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
trq Prolific Member

trq

Posted
Posted

You forgot to include a description of your problem. You might also try narrowing your issue down somewhat.

 

Most people will look at a massive code dump (especially when (like yours) its not formatted in a manor that makes it readable) and not bother replying.

Jayden_Blade Member

Jayden_Blade

Posted
  • Author
Posted

 

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?

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • 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.