CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Alex Parsons
Alex Parsons

Reputation: 17

onClick image, display div content

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.

Upvotes: 1

Views: 11917

Answers (3)

sasi
sasi

Reputation: 209

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

Upvotes: 3

Pratik Joshi
Pratik Joshi

Reputation: 11693

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

Upvotes: 1

uberchris
uberchris

Reputation: 108

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>

Upvotes: 2

Related Questions