Использование JS Toggle для отображения/скрытия

Question

Я как бы новичок в JS, и мне не удается заставить мой код работать именно так, как я этого хочу. (см JSFiddle https://jsfiddle.net/ey02227z/3/)

У меня есть 3 изображения, и хотел бы быть в состоянии нажать на изображение и иметь его показать скрытые DIV, а затем, когда следующее изображение будет нажата, я хочу, чтобы скрыть первые div и показать следующий.

(Нажмите на изображение, чтобы увидеть 1 HiddenContent1, Нажмите IMAGE2, она скрывает HiddenContent1 и показывает HiddenContent2 и т.д.)

Вот мой код:

(я не включал JS, потому что, честно говоря, я не знаю с чего начать.)

Спасибо заранее!

#ImgContainer{ 
 
    text-align:center; 
 
} 
 

 
.Hidden{ 
 
    display:none; 
 
} 
 

 
.image:hover{ 
 
    border: 1px solid purple; 
 
} 
 

 
#HiddenContentContainer{ 
 
    text-align: center; 
 
    min-height:50px; 
 
    min-width:100%; 
 
    border: 1px solid teal; 
 
}

<div id="MainContainer"> 
 
    <div id="ImgContainer"> 
 
     <a href="#"><img id="image1" class="image" src="http://placehold.it/150" onmouseover="this.src='http://placehold.it/150?text=Image+1';" onmouseout="this.src='http://placehold.it/150';" /></a> 
 
     <a href="#"><img id="image2" class="image" src="http://placehold.it/150" onmouseover="this.src='http://placehold.it/150?text=Image+2';" onmouseout="this.src='http://placehold.it/150';" /></a> 
 
     <a href="#"><img id="image3" class="image" src="http://placehold.it/150" onmouseover="this.src='http://placehold.it/150?text=Image+3';" onmouseout="this.src='http://placehold.it/150';" /></a> 
 
    </div> 
 
    <div id="HiddenContentContainer"> 
 
    <h3>HIDDEN CONTENT SHOULD APPEAR HERE</h3> 
 
     <div id="Hidden1" class="Hidden">This is My Hidden Content for Image 1</div> 
 
     <div id="Hidden2" class="Hidden">This is My Hidden Content for Image 2</div> 
 
     <div id="Hidden3" class="Hidden">This is My Hidden Content for Image 3</div> 
 
    </div> 
 
</div>

Answer 1

Это может решить вашу проблему. Попробуйте это

HTML

<div id="MainContainer"> 
<div id="ImgContainer"> 
    <a href="#"><img id="image1" class="image" data-target="#Hidden1" src="http://placehold.it/150" onmouseover="this.src='http://placehold.it/150?text=Image+1';" onmouseout="this.src='http://placehold.it/150';" /></a> 
    <a href="#"><img id="image2" class="image" data-target="#Hidden2" src="http://placehold.it/150" onmouseover="this.src='http://placehold.it/150?text=Image+2';" onmouseout="this.src='http://placehold.it/150';" /></a> 
    <a href="#"><img id="image3" class="image" data-target="#Hidden3" src="http://placehold.it/150" onmouseover="this.src='http://placehold.it/150?text=Image+3';" onmouseout="this.src='http://placehold.it/150';" /></a> 
</div> 
<div id="HiddenContentContainer"> 
    <h3>HIDDEN CONTENT SHOULD APPEAR HERE</h3> 
    <div id="Hidden1" class="Hidden">This is My Hidden Content for Image 1</div> 
    <div id="Hidden2" class="Hidden">This is My Hidden Content for Image 2</div> 
    <div id="Hidden3" class="Hidden">This is My Hidden Content for Image 3</div> 
</div> 

JS:

//Normal hide-show 
$(".image").click(function(){ 
$(".Hidden").hide(); 
    $($(this).attr("data-target")).show(); 
}); 

//For Toggle same code 
$(".image").click(function(){ 
$(".Hidden").hide(); 
    if(!$($(this).attr("data-target")).hasClass("current")){ 
    $($(this).attr("data-target")).show().addClass("current"); 
    } 
    else{ 
    $($(this).attr("data-target")).removeClass("current"); 
    } 

}); 

Answer 2

Вот отправная точка:

// listen to clicks from any of the links 
$('#ImgContainer a').on('click', function(e) { 
    e.preventDefault(); // not necessary in this case but good practice 

    var link = $(this); // the link that was clicked 
    var index = link.index(); // its index position 

    $('#HiddenContentContainer div').addClass('Hidden'); // reset all to hidden 
    $('#Hidden' + (index + 1)).removeClass('Hidden'); // remove the hidden associated with this clicked link 
}); 

Включенные комментарии, которые помогут вам лучше понять, что делает каждая строка.