CODEWITHSUNDEEP
javascriptjqueryhtmlcsstoggle
J.Hope
J.Hope

Reputation: 27

Using JS Toggle to Show/Hide

I am sort of new to JS, and I'm having trouble getting my code to work exactly how I want it to. (See JSFiddle https://jsfiddle.net/ey02227z/3/)

I have 3 images, and would like to be able to click on an image and have it show a hidden div, and then when the next image is clicked, I want it to hide the first div and show the next one.

(Click Image 1 to see HiddenContent1, Click Image2, it hides HiddenContent1 and shows HiddenContent2, etc.)

Here is My Code:

(I didn't include any JS because honestly, I don't know where to start.)

Thank you in advance!

#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>

Upvotes: 1

Views: 134

Answers (2)

Prashant
Prashant

Reputation: 385

This may solve your problem. Try It

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");
  }

});

Upvotes: 1

smaili
smaili

Reputation: 1235

Here's a starting point:

// 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
});

Included comments to help you better understand what each line does.

Upvotes: 0

Related Questions