JQuery - 여러 div가 독립적으로 열림/닫힘

Question

나는 서로 열고 독립적으로 닫으려는 여러 개의 div가있는 페이지가 있습니다. 내 코드는 지금까지 여기에 있습니다 : http://jsfiddle.net/Einulfr/q4ra0gbb/

자바 스크립트 :

$(document).ready(function() { 
    $("#hide").click(function() { 
     $("#show").show(); 
     $(".expandedText").hide(); 
    }); 
    $("#show").click(function() { 
     $("#show").hide(); 
     $(".expandedText").show(); 
    }); 
}); 

HTML :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

<h2>Title of First Article</h2> 

<p>Story introduction paragraph here...</p> 
<a href="#" id="show">Read More...</a> 

<div class="expandedText" style="display: none;> 
    <p>Story continued here in second paragraph...</p> 
    <p>Story continued here in third paragraph...</p> <a href="#" id="hide">Close Article</a> 

</div> 

<h2>Title of Second Article</h2> 

<p>Story introduction paragraph here...</p> 
<a href="#" id="show">Read More...</a> 

<div class="expandedText" style="display: none;> 
    <p>Story continued here in second paragraph...</p> 
    <p>Story continued here in third paragraph...</p> <a href="#" id="hide">Close Article</a> 

</div> 

그러나 당신이 볼 수있는 첫 번째는 잘 작동하는 동안, 연속 된 div가 없으며, 또한 첫 번째 div의 작업을 열고 닫습니다. 또한 '자세히 ...'을 클릭하고 '닫기'를 클릭하면 사라집니다. 현재 작동하지만 유사한 질문에 대한 다른 모든 솔루션은 단순히 초기 더 읽기 ...) 링크를 클릭하고 다시 숨기려면 원래 링크를 다시 클릭해야합니다. 나는 이것이 의미가 있기를 바랍니다 :/

나는 이런 종류의 일에 있어서는 완전한 초심자입니다. 나는 무엇을 놓치고/잘못 했는가?

미리 감사드립니다.

Answer 1

변경, 모든 통해 :

• id="show"
• id="hide" 다음

class="hide"-class="show"에 :

$(document).ready(function() { 
    $(".hide").click(function() { 
     $(this).closest(".expandedText").hide().prev(".show").show(); 
    }); 
    $(".show").click(function() { 
     $(this).hide().next(".expandedText").show(); 
    }); 
}); 

Answer 2

다음 URL의 확인 코드.

http://jsfiddle.net/q4ra0gbb/3/

$(document).ready(function() { 
    $(".story .btnShow").click(function(){ 
     $(this).parent().find(".expandedText").show();  
    }); 
    $(".story .btnHid").click(function(){ 
     $(this).parent().hide();  
    }); 
}); 

나는 각 상점에 대한 부모의 구조를 생성하고 클래스 일부 ID를 교체했습니다.

Answer 3

이후 당신은 새로운데, 나는 코드를 매우 기본적이고 각 섹션을 설명하도록 재구성했습니다. 다른 사람들이 언급했듯이 id은 한 번 발생하는 것을 의미하기 때문에 페이지에서 반복되는 요소에 classes을 사용하는 것이 가장 좋습니다.

JQuery와

$(document).ready(function() { 

    function hideExpanded() 
    { 
     // Hide all expandedText divs that may be open 
     $('div.expandedText').hide(); 

     // Show all the read more buttons 
     $('a.show').show(); 
    } 

    $('a.hide').click(function(e) { 

     // Prevent the page from bouncing to the top 
     e.preventDefault(); 

     // Close all of the expanded text and show the read more button 
     hideExpanded(); 

    }); 
    $('a.show').click(function(e) { 

     // Prevent the page from bouncing to the top 
     e.preventDefault(); 

     // Close all of the expanded text and show the read more button 
     hideExpanded(); 

     /* 
     * Show the expandedText div associated with 
     * the parent element of the button clicked 
     */ 
     $(this).parent().find('div.expandedText').show(); 

     // Hide the read more button that was just clicked 
     $(this).hide(); 

    }); 
}); 

html로

<div class="article"> 
    <h2>Title of First Article</h2> 
    <p>Story introduction paragraph here...</p> 
    <a href="#" class="show">Read More...</a> 
    <div class="expandedText" style="display: none;"> 
     <p>Story continued here in second paragraph...</p> 
     <p>Story continued here in third paragraph...</p> 
     <a href="#" class="hide">Close Article</a> 
    </div> 
</div> 
<div class="article"> 
    <h2>Title of Second Article</h2> 
    <p>Story introduction paragraph here...</p> 
    <a href="#" class="show">Read More...</a> 
    <div class="expandedText" style="display: none;"> 
     <p>Story continued here in second paragraph...</p> 
     <p>Story continued here in third paragraph...</p> 
     <a href="#" class="hide">Close Article</a> 
    </div> 
</div> 

이것은 당신이 일이되어야 개념적으로 무엇을하고 일할 수있는 방법을 이해하는 데 도움이 할 수있는 이상, 쉬었 대답을합니다. 코드의 배경을 이해하면 단축 할 수 있습니다.