JQueryを使用した情報パネルの表示/非表示

Question

ボタンをクリックすると、画像の上に追加情報が表示されたオーバーレイパネルを表示しようとしています。 HTMLは以下のように見え、これらのセクションは無制限に存在することがあります。

<div class="half"> 

    <img src="https://upload.wikimedia.org/wikipedia/commons/c/c0/BiyaRiver.JPG" alt="">        

    <div class="information""> 

     <p>Left Image Overlay Information</p> 

    </div> <!-- .information --> 

    <div class="info-icon"></div><!-- .info-icon -->    

</div> <!-- .half --> 

「.information」オーバーレイは表示に設定されています：最初はCSSでどれとは、私は以下のようにいくつかのjQueryコードを持っていた：

$(".info-icon").click(function() { 

    if($(".information").is(":hidden")) { 

     $(this).css("background","url(https://cdn0.iconfinder.com/data/icons/very-basic-android-l-lollipop-icon-pack/24/close-128.png"); 

     $(".information").css("display","block"); 

    } else { 

     $(this).css("background","url(https://cdn2.iconfinder.com/data/icons/app-types-in-grey/128/info_512pxGREY.png"); 

     $(".information").css("display","none"); 

    } 

}); 

しかしこれは、一度にすべてのパネルに影響を与えないとしました私が何をしたかではない。

私は以下のコードに似ていますが、私が望むものに近いですが、期待通りに動作しません。各セクションのパネルを公開することはできますが、最後のセクションに到達するまで閉じることはできません。その後、期待どおりに表示および表示されます。

$(".info-icon").click(function() { 

    if($(".information").is(":hidden")) { 

     $(this).css("background","url(http://butterscotch.wecreatedev.co.uk/wp-content/themes/butterscotch-child/img/close.svg"); 
     $(this).closest('.half').find('.information').css("display","block"); 

    } else { 

     $(this).css("background","url(http://butterscotch.wecreatedev.co.uk/wp-content/themes/butterscotch-child/img/information.svg"); 
     $(this).closest('.half').find('.information').css("display","none");  

    } 

}); 

JSフィドルは、問題をデモするために作成されています

https://jsfiddle.net/g83Lbodu/4/

すべての時間とヘルプは大いにこれで認識されます。

Answer 1

さらに divを満たすようにifの条件を更新する必要があります。また、あなたは次のようにだからあなたの新しいコードは読むべき.hide()と.show()

を使用することができるはず、直接CSSを設定する必要はありません。

$(".info-icon").click(function() { 

    if($(this).closest('.half').find('.information').is(":hidden")) { 

     $(this).css("background","url(http://butterscotch.wecreatedev.co.uk/wp-content/themes/butterscotch-child/img/close.svg"); 
     $(this).closest('.half').find('.information').show(); 

    } else { 

     $(this).css("background","url(http://butterscotch.wecreatedev.co.uk/wp-content/themes/butterscotch-child/img/information.svg"); 
     $(this).closest('.half').find('.information').hide();  

    } 

}); 

更新フィドル：https://jsfiddle.net/g83Lbodu/7/

Answer 2

私は、このかなり簡素化し、CSSスタイルの変化に対応させることをお勧めします：

JS Fiddle

jQueryの

$(".info-icon").click(function() { 
    $('.half').has(this).toggleClass('overlay-visible'); 
}); 

CSS

.overlay-visible .information { 
    display: block; 
} 
.overlay-visible .info-icon { 
    background: url('http://butterscotch.wecreatedev.co.uk/wp-content/themes/butterscotch-child/img/close.svg') 100% 100%; 
}