Html — display elements when button is clicked
Question
I am having a following html page. Here my requirement is that :---
1> when top vegetable button is pressed then 6 vegetables are shown.
2> When top animal button is pressed then 20 animals are shown.
3> When topautomobile button is pressed then 26 cars are shown.
I am posting the basic layout. What i am thinking is that add 26 elements (as maximum number of elements in div id="center" can be 26 not more than this) in the div "center". And hide the divs & change images & the description as per the button pressed.
Is it the right way. Please suggest how to achieve this ?
<!DOCTYPE html>
<html style="height: 100%;">
<head>
<title>My item list </title>
<style>
body, html {
width:100%;
height:100%;
margin:0;
padding:0;
position:relative;
}
.input {
display: inline-block;
padding: 0 2px;
}
.input input {
display: block;
}
.imgtxt {
margin: 0;
font-family:arial;
color:#DDDFED;
font-size:15px;
}
#images {
background-color: grey;
white-space:nowrap;
}
div.scrollable {
margin: 0;
padding: 0;
overflow: auto;
padding-left: 4px;
padding-top: 20px;
box-sizing:border-box;
}
div.scrollableMenu {
margin: 0;
padding: 0;
overflow: auto;
padding-left: 4px;
padding-top: 20px;
box-sizing:border-box;
}
div.scrollableCenter {
margin: 0;
padding: 0;
overflow: auto;
padding-left: 4px;
padding-top: 20px;
box-sizing:border-box;
}
#center {
background-color:#292B3B;
position:absolute;
top:115px;
left:0px;
right:0px;
bottom:20px;
}
#fotter {
background-color:#CC99FF;
text-align:center;
position:absolute;
left:0;
bottom:0;
width:100%;
}
</style>
</head>
<body >
<div id="images" class="scrollable">
<div class="input">
<input type="image" src="http://t3.gstatic.com/images?q=tbn:ANd9GcRTBRnn9Aqx74JvKyJ7Z5ydbXXuj8cIDVuOdJZUxb02Q2LWfJGP" onclick="alert('clicked')" title="Room one" alt="Bulb pop up" width="80" height="48" />
<p class="imgtxt">vegitable</p>
</div>
<div class="input">
<input type="image" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQPsZfek4J5rZKHyPdgWu7qq9WJJzlpSSwCmUAFQflwLJqWxk_5sfy7r0mJ" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" />
<p class="imgtxt">Animals</p>
</div>
<div class="input">
<input type="image" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRhxj6l2Y_6ZiqXnY6fx-nLUgVzMMkdAndmMSTyJR31T15Itl2FZBAqlaSa" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" />
<p class="imgtxt">Automobile</p>
</div>
</div>
<div id="center" class="scrollableCenter">
<div >
<input type="image" src="http://t1.gstatic.com/images?q=tbn:ANd9GcTMPmp8aVaovrd3AGj1_hL_GEXX1M4DJ-TTMJ34Vr622XeY_usu" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" hspace="10" vspace="6"/>
<p class="imgtxt" style="padding-top : 20px; padding-right : 100px; float:right;">brinjal</p>
<hr/>
</div>
<div >
<input type="image" src="http://upload.wikimedia.org/wikipedia/commons/2/25/Cauliflower.JPG" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" hspace="10" vspace="6"/>
<p class="imgtxt" style="padding-top : 20px; padding-right : 100px; float:right;">cauliflower</p>
<hr/>
</div>
<div >
<input type="image" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQJgt4i9ph9uQsS3JV940PBg-kwN1kkrKbC6FLYI6UhbxucEb91" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" hspace="10" vspace="6"/>
<p class="imgtxt" style="padding-top : 20px; padding-right : 100px; float:right;">tomato</p>
<hr/>
</div>
<div >
<input type="image" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcT-mwuxaqQeHXjoZzPUoee9Rvg8Jq-eCvo8H0EgEtapjfr6U4E3" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" hspace="10" vspace="6"/>
<p class="imgtxt" style="padding-top : 20px; padding-right : 100px; float:right;">ladyfinger</p>
<hr/>
</div>
<div >
<input type="image" src="http://t2.gstatic.com/images?q=tbn:ANd9GcQRxXUO2stKHLyET_rXpxOuLp67qc1IzlBcJGke5jYoGPeRZpnO" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" hspace="10" vspace="6"/>
<p class="imgtxt" style="padding-top : 20px; padding-right : 100px; float:right;">radish</p>
<hr/>
</div>
<div >
<input type="image" src="http://t3.gstatic.com/images?q=tbn:ANd9GcT2zCeG621TSX1YmcsT9DPLaQJkdVwdYk_n-eWECCa8NTtXR0LFeQ" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" hspace="10" vspace="6"/>
<p class="imgtxt" style="padding-top : 20px; padding-right : 100px; float:right;">ginger</p>
<hr/>
</div>
</div>
<div id="fotter">List of Items</div>
</body>
</html>
2 answers
solution1
0 ACCPTED 2014-04-09 11:54:34
I would suggest adding a class .vegatable , .car , .animal to seperate divs that cointains your images, and simply doing show() / hide() on thme. This will require jQuery but keeps things really simple.
$('.animal').show(); // this will show all divs that have animal class set
$('.vegetable').hide(); // this will hide all divs that have vegetable class set
$('.car').hide(); // this will hide all divs that have car class set
Here is jsfiddle example: http://jsfiddle.net/TbBgA/2/
solution2
0 2014-04-09 11:55:09
Basically You woud want add 3 more div for ease i used your already existing div with id center and 2 more center1 center2 respectively
Change Html Content to this
<div id="images1" class="scrollable">
<div class="input">
<input id="imgtxtV" type="image" src="http://t3.gstatic.com/images?q=tbn:ANd9GcRTBRnn9Aqx74JvKyJ7Z5ydbXXuj8cIDVuOdJZUxb02Q2LWfJGP" onclick="alert('clicked')" title="Room one" alt="Bulb pop up" width="80" height="48" />
<p class="imgtxt">vegitable</p>
</div>
<div class="input">
<input id="imgtxtA" type="image" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQPsZfek4J5rZKHyPdgWu7qq9WJJzlpSSwCmUAFQflwLJqWxk_5sfy7r0mJ" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" />
<p class="imgtxt">Animals</p>
</div>
<div class="input">
<input id="imgtxtAUTo" type="image" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRhxj6l2Y_6ZiqXnY6fx-nLUgVzMMkdAndmMSTyJR31T15Itl2FZBAqlaSa" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" />
<p class="imgtxt">Automobile</p>
</div>
</div>
Jquery script
$('#imgtxtV').click(function(){
alert("clicked vegitables");
$("#center").css("display", "block");
$("#center1").css("display", "none");
$("#center2").css("display", "none");
}
);
$('#imgtxtA').click(function(){
alert("clicked Animals");
$("#center").css("display", "none");
$("#center1").css("display", "block");
$("#center2").css("display", "none");
}
);
$('#imgtxtAUTo').click(function(){
alert("clicked AutoMobiles");
$("#center").css("display", "none");
$("#center1").css("display", "none");
$("#center2").css("display", "block");
}
);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Get elements of HTML TR when a button in the row is clicked
Button That When Clicked Will Display Hidden Column in HTML Table
Show first 5 child elements and hide them when next button is clicked and display next 5 with jquery
JavaScript Error…Not creating elements when the button is clicked
how to show elements when button was clicked in JavaScript
How to remove an outline from HTML elements 'button' and 'img' when onload or clicked?
Removing HTML elements with javascript when clicked
Hide divs and display div when button clicked
Display Text when Delete button is clicked in GridView
How to display randomly text when a button is clicked
Related Tags