2013-05-28 2 views
0

동적으로 생성되는 DIV의 내용을 확장하거나 축소하려고하는 쿼리 (JS, HTML 및 PHP 사용)를 작성하려고합니다. JS에서 DIV 확장 및 축소 쿼리를 작성하는 데 성공했습니다. 그것은 나에게 문제를 준다. Div 1 아래에있는 div를 확장하려고하면 확장 된 정보는 DIV 1에만 표시됩니다. 각 Div에서 확장하는 방법?DIV 다중 동적 접기 가능

JS 코드 :

function toggle(id) { 
    var e = document.getElementById(id); 
    if (e.style.display == ''){ 
    e.style.display = 'none'; 
    } else { 
    e.style.display = ''; 
    } 
} 

HTML 코드 :

나는 코드의 부분을 복사하고

<div class="longDes"> 
    <p> 
     <br> 
     <?php echo $rs['shortDescription'];?> 
     <?php $idDiv = $rs['TITLE']; echo $idDiv;?> 
     <BR> 
    </p> 

    <p> 
     <br> 
     <a href = "#" onclick = "toggle('<?php echo $idDiv?>')"> 
       See More information about <?=$rs['TITLE']?></a> 
     <br> 
     <div id = "<?php echo $idDiv ?>" name = "<?php echo $idDiv ?>" style="display:none"> 
     <?php //echo "this is Buy Flag ".$rs['buyStatus']?> 
     <p> 
      <?php echo $rs['description']?> 
     </p> 
    </div> 

당신이 도와주세요 수를!? 나는 나의 지혜 끝에있다!

+0

[jsFiddle] (http://jsfiddle.net/)을 만들 수 있습니까? –

답변

0

여기서 Jquery를 사용하는 것이 좋습니다. 다음과 같이하면 다음을 수행해야합니다.

$(document).ready(function() { 
    $(<?php echo $idDiv ?>).slideToggle(); 
}); 

이렇게하면 출발점이됩니다. 이를 외부 JS 파일 (예 : ext.js)의 일반 JS 함수에 통합 할 수 있습니다.

희망이 도움이됩니다.

+0

질문의'꼬리표'를보십시오. 이것은 jQuery가 아닙니다. –

0

변경 e.style.display == '에 e.style.display =='블록 '도

e.style.display ='에 e.style.display = ' 블록';

function toggle(id) { 
     var e = document.getElementById(id); 
     if (e.style.display == 'block'){ 
     e.style.display = 'none'; 
     } else { 
     e.style.display = 'block'; 
     } 
    } 

작업 Jsfiddle이 당신을 도울 것입니다 http://jsfiddle.net/6hdre/

희망!