onClick image, display div content

Question

I am very new to javascript but i wanted to know how to do something in it. Basically i have 3 image buttons. I want to know how i can make it so when you click the first button a div shows up, then when you click the next button the div that is present disappears and the next div shows up for button two in its place. By divs i mean any content that i put inside of it. Just like the tabs on a website, when you click one you get a page. Then when you click the next tab the previous page disappears and the next page is shown. Instead of pages these would be divs.

Any advice would be greatly appreciated.

Could you post some of your code? There are a myriad of ways to do this. Kind of hard to know what you are trying to do without knowing what you are using. You can use pure javascript for this or you can use one of the many libraries you have available to you. — Gjohn
– Gjohn, Commented Nov 10, 2014 at 4:08

sasi · Accepted Answer · 2014-11-10 07:43:55Z

3

Here is the simple solution for hide and show related div's

Check the link for solution : http://jsfiddle.net/silpa/rny2wb5z/34/

HTML:

 <img src="https://i.sstatic.net/JHoSf.gif?s=128&g=1" data-id="divId1"/> 
 <img src="https://i.sstatic.net/JHoSf.gif?s=128&g=1" data-id="divId2"/> 
 <img src="https://i.sstatic.net/JHoSf.gif?s=128&g=1" data-id="divId3"/>
 <div id="divId1" class="hideDivs">Div 1</div>
 <div id="divId2" class="hideDivs">Div 2</div>
 <div id="divId3" class="hideDivs">Div 3</div>

jQuery:

 $("img").on('click',function(){
   var hello = $(this).attr('data-id');
   $('.hideDivs').hide();
   $('#'+hello).show();
 });

CSS:

 .hideDivs{
    display:none; 
 }

answered Nov 10, 2014 at 7:43

sasi

2091 silver badge7 bronze badges

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

Comments

uberchris · Accepted Answer · 2014-11-10 04:10:17Z

Assign IDs to the divs, then set their visibility with a function. You can call this function with the onClick attribute of the image button.

Javascript:

function changePage(newPageId) {
    //hide all pages
    document.getElementsByClassName("selectablePages").style.display = 'none';
    //show page we want to see
    document.getElementById(newPageId).style.display = 'block';
}

Html:

<img src="p1.gif" alt="page1" onclick="changePage('page1')" />
<img src="p2.gif" alt="page2" onclick="changePage('page2')" />
<img src="p3.gif" alt="page3" onclick="changePage('page3')" />

<div id="page1" class="selectablePage">asdasdasd</div>
<div id="page2" class="selectablePage">jghjghjghj</div>
<div id="page3" class="selectablePage">utytyutyuty</div>

Pratik Joshi · Accepted Answer · 2014-11-10 04:18:14Z

1

Check Fiddle

<img src="https://i.sstatic.net/JHoSf.gif?s=128&g=1" id="imgId1"/> 
<div id="divId1" class="hideDivs">Div 1</div>
<img src="https://i.sstatic.net/JHoSf.gif?s=128&g=1" id="imgId2"/> 
<div id="divId2" class="hideDivs">Div 2</div>
<img src="https://i.sstatic.net/JHoSf.gif?s=128&g=1" id="imgId3"/> 
<div id="divId3" class="hideDivs">Div 3</div>

//jQuery

$("#imgId1").click(function(){
    $("#divId2").hide();
    $("#divId3").hide();    
    $("#divId1").show();
});
$("#imgId2").click(function(){
    $("#divId1").hide();
    $("#divId3").hide();    
    $("#divId2").show();
});
$("#imgId3").click(function(){
    $("#divId1").hide();
    $("#divId2").hide();    
    $("#divId3").show();
});

edited Nov 10, 2014 at 4:18

answered Nov 10, 2014 at 4:10

Pratik Joshi

11.7k7 gold badges44 silver badges73 bronze badges

Collectives™ on Stack Overflow

onClick image, display div content

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related