jQuery：1回のクリックで1つのアイテムを表示

Question

私は多分あなたに私を助けることができる小さな問題がありますか？ 私はHTML divとshowとhideの機能を持っています。

すべてを表示するのではなく、1回のクリックで1つの表示するだけです。 jqueryコードを作成しましたが、すべてのdivが表示されます。

が必要です。その後、 使用.toggleClass()を表示するために

https://jsfiddle.net/pfcglen/pLfbwve5/2/

jQuery(document).ready(function() { 

    var toggleContent = jQuery('.insideContent'); 
    toggleContent.addClass('hidden'); 
    var thisElemnt = $(this); 
    jQuery('.button').on('click', function() { 
     thisElemnt.find('.insideContent').removeClass('hidden').addClass('show'); 
    }); 


}); 

jQuery(document).ready(function() { 
 

 
    var toggleContent = jQuery('.insideContent'); 
 
    toggleContent.addClass('hidden'); 
 
    var thisElemnt = $(this); 
 
    jQuery('.button').on('click', function() { 
 
    thisElemnt.find('.insideContent').removeClass('hidden').addClass('show'); 
 
    }); 
 

 

 
});

.hidden { 
 
    display: none !important; 
 
} 
 
.show { 
 
    display: block !important; 
 
} 
 
.list { 
 
    direction: inherit; 
 
    display: flex; 
 
    width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<div class="list"> 
 
    <div class="col-lg-2 workImage"> 
 
    <div class="itemTitle"> 
 
     <h2 class="page-header text-center">Item</h2> 
 
     <button class="button">Open Project</button> 
 
    </div> 
 
    <div class="insideContent"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
    </div> 
 
    </div> 
 
    <div class="col-lg-2 workImage"> 
 
    <div class="itemTitle"> 
 
     <h2 class="page-header text-center">Item</h2> 
 
     <button class="button">Open Project</button> 
 
    </div> 
 
    <div class="insideContent"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
    </div> 
 
    </div> 
 
    <div class="col-lg-2 workImage"> 
 
    <div class="itemTitle"> 
 
     <h2 class="page-header text-center">Item</h2> 
 
     <button class="button">Open Project</button> 
 
    </div> 
 
    <div class="insideContent"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

jQuery(document).ready(function() { 

    var toggleContent = jQuery('.insideContent'); 
    toggleContent.addClass('hidden'); 
    var thisElemnt = $(this); 
    jQuery('.button').on('click', function() { 
     $(this).closest('.itemTitle').next('.insideContent').toggleClass('hidden show');//use $(this) to apply only to click elemt 
    }); 


}); 

使用.closest()は、ターゲットのdivを取得するために最も近い親.itemtitleその後、 使用.next()を取得しますND

DEMO