जावास्क्रिप्ट accordion/css ठीक से काम नहीं कर रहा है

Question

मेरे पास एक ब्लॉग पेज है जिस पर मुझे एग्रीजन jQuery का उपयोग करके पोस्ट सूचीबद्ध करना है। मैं इसे काम करने में कामयाब रहा लेकिन यह ठीक से प्रस्तुत नहीं कर रहा है, अधिक सटीक: पृष्ठ की ऊंचाई पोस्ट आकार के अनुसार विस्तारित नहीं होती है। आप इसे यहां देख सकते हैं: http://melisayavas.com/web/?page_id=22

मुझे लगता है कि यह एक jQuery की तुलना में अधिक सीएसएस समस्या है, दुर्भाग्य से मेरे पास वास्तव में यह सुनिश्चित करने के लिए सीएसएस या jQuery का पर्याप्त ज्ञान नहीं है कि समस्या कहां है और इसे कैसे ठीक किया जाए।

/* Vertical Accordion Style */ 
.va-container{ 
position:relative; 
} 
.va-wrapper{ 
width:100%; 
height:100%; 
position:relative; 
overflow:hidden; 
background:#000; 
} 
.va-slice{ 
cursor:pointer; 
width:100%; 
left:0px; 
overflow:hidden; 
} 

.va-title{ 
} 
.va-content{ 
display:none; 
margin-left:25px; 
} 
.va-slice p{ 
} 
.va-slice ul{ 
margin-top:20px; 
} 
.va-slice ul li{ 
} 
.va-slice ul li a{ 
} 
.va-slice ul li a:hover{ 
} 

.post { 
border: 2px solid; 
border-radius: 10px; 
clear: both; 
overflow: hidden; 
padding: 20px; 
margin-top: 28px; 
} 

.about { 
clear: both; 
overflow: hidden; 
} 

.about-page { 
border: 2px solid; 
border-radius: 10px; 
clear: both; 
overflow: hidden; 
padding: 20px; 
margin-top: 28px; 
} 

पूर्ण अकॉर्डियन jQuery यहां पाया जा सकता: http://pastebin.com/hJEufLQU

Answer 1

jquery.vaccordion.js में अकॉर्डियन तत्व और विस्तारित अकॉर्डियन मदों की ऊंचाई की ऊंचाई स्पष्ट रूप से सेट किया जा रहा है:

line 300 - accordionH : 450 
... 
line 305 - expandedHeight: 350 

इस वजह से

, तत्व भी पोस्ट सामग्री फिट करने के लिए छोटे हैं। आप या तो इन लाइनों को हटाने या अपनी ऊंचाइयों को "auto" पर सेट करने का प्रयास कर सकते हैं।

संपादित

जवाब देने के लिए अपने addittional टिप्पणी " किसी भी विचार कैसे मैं करने के लिए पहला तत्व कर सकते हैं जब ऑटो का विस्तार पृष्ठ लोड?"

यह अकॉर्डियन संभाल चाहिए की तरह मुझे लग रहा है यह डिफ़ॉल्ट रूप से व्यवहार करता है [see accordion demo]। तो मुझे यकीन नहीं है कि यह पहला तत्व क्यों नहीं दिखा रहा है। वैसे भी, आप सीएसएस के माध्यम से इस को हल कर सकते हैं:

#va-accordion .va-slice:first-child .va-content{ 
    display: block;  
} 

JSFiddle उदाहरण: http://jsfiddle.net/mcDeE/

Answer 2

<script> 
    $(document).ready(function() { 
       $('.va-slice').click(function(){ 
        var index_div = $(this).index(); 
        var element = $('.va-slice').eq(index_div); 
       }); 
    }); 
</script> 

<script type="text/javascript"> 
     $(function() { 
      $('#va-accordion').vaccordion(); 
     }); 

    </script> 


<div id="va-accordion" class="va-container"> 
<div class="va-wrapper"> 
<div class="about-page">  
<?php query_posts(array ('category_name' => 'About', 'posts_per_page' => -1)); 
?> 
<?php if (have_posts()) : while (have_posts()) : the_post(); ?> 
    <div class="va-slice"> 
    <article class="about" id="about-<?php the_ID(); ?>"> 
     <div class="title"><h2><?php the_title(); ?></h2></div> 
     <div class="va-content"> 
     <div class="entry"> 
      <li><?php the_content(); ?></li> 
     </div> 
     </div> 

     <?php edit_post_link('Edit this entry.', '<p>', '</p>'); ?> 

    </article> 
    </div> 
    <?php endwhile; endif; ?> 

</div> 
</div> 
</div> 

यह सीएसएस मैं प्रयोग किया जाता है:

इस HTML पृष्ठ के & जे एस है

उस स्क्रिप्ट को लागू करें जो उस तत्व पर 'clear_va' श्रेणी को जोड़ता है

.explicit_va{ 
     min-height:0px !important; 
     height:100% !important; 
     } 

Answer 3

<script> 
$(document).ready(function() { 
      $('.va-slice').click(function(){ 
       var index_div = $(this).index(); 
       //console.log(index_div); 

       var element = $('.va-slice').eq(index_div); 
       //console.log(element); 
       //var getHeight = element.height(); 
       //console.log(getHeight); 

       console.log(element.attr('style', ''));   
       console.log(element.addClass('explicit_va')); 

      }); 
}); 
</script> 

अधिक: http://source88.blogspot.com/search/label/Accordion