Using JS Toggle to Show/Hide

Question

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>

@Justin please mark my response as the answer if it solves your problem, otherwise please provide more information so that we can help you. — smaili
– smaili, Commented Mar 28, 2016 at 4:43

Prashant · Accepted Answer · 2016-03-30 06:05:09Z

1

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

});

edited Mar 30, 2016 at 6:05

answered Mar 28, 2016 at 8:30

Prashant

3852 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

J.Hope Over a year ago

This works perfectly Thank You! The only other question I have, is what would I have to add to the JS to make it so if the same link is clicked, it hides the hidden content again? (Click Image 1 so HiddenContent1 is shown, and when Image 1 is clicked, it hides HiddenContent1 again?)

Prashant Over a year ago

Check above code I have added js to toggle if same image is clicked again.

smaili · Accepted Answer · 2016-03-28 02:51:46Z

0

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.

answered Mar 28, 2016 at 2:51

smaili

1,2359 silver badges19 bronze badges

1 Comment

Satej S Over a year ago

You should add to the JSFIDDLE, this will help OP come to a conclusion quicker. and help others upvote you as the right answer.

Collectives™ on Stack Overflow

Using JS Toggle to Show/Hide

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related