Please see the picture attached with this question. I have four tables with me. When I click certain table name (eg Table 1), I want that table to get displayed in the right hand side. When I click on some other table name, previous one should disappear and present one should be displayed.
I know only html. So, please tell me if this can be done alone with html. If not, I am allowed to use only CSS and JavaScript (I am new to both of these and will learn if they will be helpful, depending on your answer). If this can be achieved using only these 3 languages (viz HTML, CSS and JavaScript), please tell.
Here is the simplest way for you to start. It gives you an easy way to follow what's going on and how things works.
Also with this solution it's easy to add a server side code (asp/php) to deal with users who has javascript disabled.
Demo: http://jsfiddle.net/DEv8z/2/
Javascript
function show(nr) {
document.getElementById("table1").style.display="none";
document.getElementById("table2").style.display="none";
document.getElementById("table3").style.display="none";
document.getElementById("table4").style.display="none";
document.getElementById("table"+nr).style.display="block";
}
CSS
td {
vertical-align: top;
}
#table1, #table2, #table3, #table4 {
display: none;
}
HTML
Other things goes here ... <br /><br />
<table>
<tr>
<td>
<a href="#" onclick='show(1);'>Table 1</a>
<br />
<a href="#" onclick='show(2);'>Table 2</a>
<br />
<a href="#" onclick='show(3);'>Table 3</a>
<br />
<a href="#" onclick='show(4);'>Table 4</a>
</td>
<td>
</td>
<td>
<div id="table1"> Content of 1 </div>
<div id="table2"> Content of 2 </div>
<div id="table3"> Content of 3 </div>
<div id="table4"> Content of 4 </div>
</td>
</tr>
</table>
UPDATE
Using a file for each table would look like this:
table1.html
Other things goes here ... <br /><br />
<table>
<tr>
<td>
Table 2
<br />
Table 3
<br />
Table 4
<br />
.....
</td>
<td>
</td>
<td>
Content of 1
</td>
</tr>
</table>
-----------------------------------------------------
table2.html
Other things goes here ... <br /><br />
<table>
<tr>
<td>
Table 1
<br />
Table 3
<br />
Table 4
<br />
.....
</td>
<td>
</td>
<td>
Content of 2
</td>
</tr>
</table>
And if you can use server side includes and your "Other things...." will be the same for all tables, you can put that part in a separete file which gets injected with the each table content.
Try this FIDDLE
HTML :
<span id="sp1">Table 1</span>
<span id="sp2">Table 2</span>
<span id="sp3">Table 3</span>
<span id="sp4">Table 4</span>
<table border="1" id="t2">
<tr><td>22</td></tr>
<tr><td>22</td></tr>
</table>
<table border="1" id="t3">
<tr><td>33</td></tr>
<tr><td>33</td></tr>
</table>
JS :
document.getElementById('sp1').addEventListener("click",function(){
showTable('t1');
});
document.getElementById('sp2').addEventListener("click",function(){
showTable('t2');
});
function showTable(table){
var tables =['t1','t2','t3','t4'];
for(var i=0;i<4;i++){
document.getElementById(tables[i]).style.display = "none";
}
document.getElementById(table).style.display = "block";
}
P.S : Since I see no effort, the styling part i'm leaving it to you.
You will need JavaScript to do this. I have a JSFiddle with the code below. JSFiddle is interactive and lets you play with the solution. I'm relying on a popular JavaScript framework named jQuery to make this a bit easier. You will need to load the jQuery framework into your site to get this to work. Here is the JSFiddle link: http://jsfiddle.net/sU9Pf/
Here is the code that you can run interactively in the above JSFiddle link. First some example HTML:
<table id="one" border="1"><caption>Table One</caption></table>
<table id="two" border="1"><caption>Table Two</caption></table>
<table id="three" border="1"><caption>Table Three</caption></table>
<table id="four" border="1"><caption>Table Four</caption></table>
<div id="showTableHereWhenTableIsClicked">
<p>Click A Table To Show It Here</p>
</div>
Next is the JavaScript that makes it do what you want:
$(function() {
$('table').on('click', function() {
var tableClone = $.clone(this);
var stage = $('#showTableHereWhenTableIsClicked');
stage.prop('innerHTML', '');
$(tableClone).appendTo(stage);
});
});
The easiest way it can be done with just HTML would require you to build 4 different pages and just link between them. If you want it to 'seem' like it is all on one page, you can use HTML iframes to make it look like your many pages are one page by loading them into the current page.
It is possible to do this in one page with just HTML and CSS, but would require really tricky CSS and the :selected selector.
The easiest way to do it in 'one page' is to use Javascript. jQuery (a javascript library) would make it even easier.
You need to know javascript or jquery to do this.
Here is an example with jquery considering your tables have ids
table_1
table_2
table_3
table_4
And your right side container has an id right-container
So on click event you can do like
$("[id^=table_]").click(function(){
$("#right-container").html($(this).parent().html());
});
Please try it...
<style type="text/css">
#tablist{
padding: 3px 0;
margin-left: 0;
margin-bottom: 0;
margin-top: 0.1em;
font: bold 12px Verdana;
}
#tablist li{
list-style: none;
display: inline;
margin: 0;
}
#tablist li a{
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: white;
}
#tablist li a:link, #tablist li a:visited{
color: navy;
}
#tablist li a.current{
background: lightyellow;
}
#tabcontentcontainer{
width: 400px;
/* Insert Optional Height definition here to give all the content a unified height */
padding: 5px;
border: 1px solid black;
}
.tabcontent{
display:none;
}
</style>
<script type="text/javascript">
/***********************************************
* Tab Content script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
//Set tab to intially be selected when page loads:
//[which tab (1=first tab), ID of tab content to display]:
var initialtab=[1, "sc1"]
////////Stop editting////////////////
function cascadedstyle(el, cssproperty, csspropertyNS){
if (el.currentStyle)
return el.currentStyle[cssproperty]
else if (window.getComputedStyle){
var elstyle=window.getComputedStyle(el, "")
return elstyle.getPropertyValue(csspropertyNS)
}
}
var previoustab=""
function expandcontent(cid, aobject){
if (document.getElementById){
highlighttab(aobject)
detectSourceindex(aobject)
if (previoustab!="")
document.getElementById(previoustab).style.display="none"
document.getElementById(cid).style.display="block"
previoustab=cid
if (aobject.blur)
aobject.blur()
return false
}
else
return true
}
function highlighttab(aobject){
if (typeof tabobjlinks=="undefined")
collecttablinks()
for (i=0; i<tabobjlinks.length; i++)
tabobjlinks[i].style.backgroundColor=initTabcolor
var themecolor=aobject.getAttribute("theme")? aobject.getAttribute("theme") : initTabpostcolor
aobject.style.backgroundColor=document.getElementById("tabcontentcontainer").style.backgroundColor=themecolor
}
function collecttablinks(){
var tabobj=document.getElementById("tablist")
tabobjlinks=tabobj.getElementsByTagName("A")
}
function detectSourceindex(aobject){
for (i=0; i<tabobjlinks.length; i++){
if (aobject==tabobjlinks[i]){
tabsourceindex=i //source index of tab bar relative to other tabs
break
}
}
}
function do_onload(){
var cookiename=(typeof persisttype!="undefined" && persisttype=="sitewide")? "tabcontent" : window.location.pathname
var cookiecheck=window.get_cookie && get_cookie(cookiename).indexOf("|")!=-1
collecttablinks()
initTabcolor=cascadedstyle(tabobjlinks[1], "backgroundColor", "background-color")
initTabpostcolor=cascadedstyle(tabobjlinks[0], "backgroundColor", "background-color")
if (typeof enablepersistence!="undefined" && enablepersistence && cookiecheck){
var cookieparse=get_cookie(cookiename).split("|")
var whichtab=cookieparse[0]
var tabcontentid=cookieparse[1]
expandcontent(tabcontentid, tabobjlinks[whichtab])
}
else
expandcontent(initialtab[1], tabobjlinks[initialtab[0]-1])
}
if (window.addEventListener)
window.addEventListener("load", do_onload, false)
else if (window.attachEvent)
window.attachEvent("onload", do_onload)
else if (document.getElementById)
window.onload=do_onload
</script>
<ul id="tablist">
<li>Dynamic Drive</li>
<li>What's New</li>
<li>What's Hot</li>
<li>Search</li>
</ul>
<DIV id="tabcontentcontainer">
<div id="sc1" class="tabcontent">
Visit Dynamic Drive for free, award winning DHTML scripts for your site:<br />
</div>
<div id="sc2" class="tabcontent">
Visit our What's New section to see recently added scripts to our archive.
</div>
<div id="sc3" class="tabcontent">
Visit our Hot section for a list of DD scripts that are popular to the visitors.
</div>
<div id="sc4" class="tabcontent">
<form action="http://www.google.com/search" method="get" onSubmit="this.q.value='site:www.dynamicdrive.com '+this.qfront.value">
<p>Search Dynamic Drive:<br />
<input name="q" type="hidden" />
<input name="qfront" type="text" style="width: 180px" /> <input type="submit" value="Search" /></p>
</form>
</div>
</DIV>
Another working answer.
Using HTML, CSS, JQUERY.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#tab1").hide();
$("#tab2").hide();
$("#tab3").hide();
$("#t1").click(function()
{
$("#tab1").show();
$("#tab2").hide();
$("#tab3").hide();
});
$("#t2").click(function()
{
$("#tab1").hide();
$("#tab2").show();
$("#tab3").hide();
});
$("#t3").click(function()
{
$("#tab1").hide();
$("#tab2").hide();
$("#tab3").show();
});
});
</script>
<style>
table
{
width:100px;
}
#tab1
{
background:red;
margin: 12px;
}
#tab2
{
background:green;
margin: 12px;
}
#tab3
{
background:blue;
margin: 12px;
}
#panel
{
width:125px;
height:80px;
border:1px solid black;
float:right;
}
#t1, #t2, #t3
{
cursor: pointer;
width:50px;
height:30px;
border:1px solid black;
}
</style>
</head>
<div>
<div id="t1">TAB1</div>
<div id="t2">TAB2</div>
<div id="t3">TAB3</div>
<div id="panel">
<table border="1" id="tab1">
<tr><td>TAB1</td></tr>
<tr><td>RED</td></tr>
</table>
<table border="1" id="tab2">
<tr><td>TAB2</td></tr>
<tr><td>GREEN</td></tr>
</table>
<table border="1" id="tab3">
<tr><td>TAB3</td></tr>
<tr><td>BLUE</td></tr>
</table>
</div>
</div>
This is easy to do, but will require the use of JavaScript.
It can not be done using html alone.
html without script is static.
When you add script to html you get dhtml (dynamic HTML) and you can make the rendered document change base on client interaction with the document.
Are you familiar with jsfiddle? It is a perfect tool to demonstrate this.
You will create 4 divs (or tables). You will give each an id and you will style each to be "display: none". You will create your table of contents as a list and using one of many methods, register a click event handler to the list.
The click event handler will set the display attribute of the visible div/table to none, then it will set the display attribute of the desired div/table to something other than none such as "block" or "table" and will finally store a reference to the visible div/table where it can be retrieved the next time the event handler is invoked.
Related
I am trying to set the background color of a cell in the html page from a simple javascript. Below is my html and javascript:
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<!-- CSS -->
<style>
.myTable {
width: 100%;
text-align: left;
background-color: lemonchiffon;
border-collapse: collapse;
}
.myTable th {
background-color: goldenrod;
color: white;
}
.myTable td,
.myTable th {
padding: 10px;
border: 1px solid goldenrod;
}
</style>
</head>
<body>
<meta http-equiv="refresh" content="30">
<script src ="Json_Development_Test.js">
</script>
<!-- HTML -->
<table class="myTable">
<tr>
<th>PROJECT</th>
<th>Service</th>
<th>PrDC</th>
<th>DDC</th>
<th>Last Checked Time(IST)</th>
</tr>
<tr>
<td>
<div>
<span id="headerID1">
<p>Test</p>
</span>
</div>
</td>
<td>
<div>
<span id="header2">
<p>Test2</p>
</span>
</div>
</td>
<td>
<div>
<p>Test3</p>
</div>
</td>
<td>
<div>
<p>Test4</p>
</div>
</td>
<td>
<div>
<p>Test5</p>
</div>
</td>
</tr>
</table>
</body>
</html>
Javascript
window.addEventListener('load', function() {
console.log('All assets are loaded')
})
document.getElementById('headerID1').bgColor='#003F87'
Expected result:
I need to change the background color of the span id "headerID1" and following other span id as well.
Actual result:
The color is not getting changed and instead I am getting the following errors:
HTML1503: Unexpected start tag.
testDesign.html (26,1)
SCRIPT5007: Unable to get property 'style' of undefined or null reference
Json_Development_Test.js (4,1)
HTML1512: Unmatched end tag.
testDesign.html (32,1)
HTML1506: Unexpected token.
testDesign.html (43,2)
2 HTML1530: Text found within a structural table element. Table text may only be placed inside "caption>", "td>", or "th>" elements.
Can anyone help me to resolve this error?
Besides some errors related to invalid HTML, as mentioned by others, your background color won't change because you put <p> inside <span> which doesn't make any sence since <p> is a paragraph and <span> is a generic inline container for phrasing content. It will work though if you put <span> inside <p>:
<p id="header2">
<span>...</span>
</p>
But if you want to apply background to the entire cell, I recommend you to style the <td> element instead. Check the following example:
document.getElementById('headerID1').style.backgroundColor = 'blue';
document.getElementById('header2').style.backgroundColor = 'lightblue';
document.getElementById('header3').style.backgroundColor = 'lightblue';
.myTable {
width: 100%;
text-align: left;
background-color: lemonchiffon;
border-collapse: collapse;
}
.myTable th {
background-color: goldenrod;
color: white;
}
.myTable td,
.myTable th {
padding: 10px;
border: 1px solid goldenrod;
}
<table class="myTable">
<tr>
<th>PROJECT</th>
<th>Service</th>
<th>PrDC</th>
<th>DDC</th>
<th>Last Checked Time(IST)</th>
</tr>
<tr>
<td>
<div>
<span id="headerID1">
<p>BG doesn't work</p>
</span>
</div>
</td>
<td>
<div>
<p id="header2">
<span>BG works because <span> is inside <p></span>
</p>
</div>
</td>
<td id="header3">
<div>
<p>BG for entire cell</p>
</div>
</td>
<td>
<div>
<p>Test4</p>
</div>
</td>
<td>
<div>
<p>Test5</p>
</div>
</td>
</tr>
</table>
UPD: Probably you are getting SCRIPT5007: Unable to get property 'style' of undefined or null reference because your Json_Development_Test.js script starts executing when the rest document is not rendered yet. You can try to:
Put <script src ="Json_Development_Test.js"> to the bottom of the html
Put this line document.getElementById('headerID1').style.backgroundColor = 'blue'; inside the window.addEventListener('load', ...) callback:
window.addEventListener('load', function() {
console.log('All assets are loaded');
document.getElementById('headerID1').style.backgroundColor = 'blue';
});
Problem is with this line of code
document.getElementById('headerID1').style.background = 'blue'
use
document.getElementById('headerID1').bgColor='blue'
instead.
Also, HTML structure is wrong too.
Your HTML is invalid. When writing HTML you might want to use an HTML validator.
A few problems with your code:
the <head> should go right after the <html> tag, and you should close the <head> before opening the <body>.
Delete this line <div id ="test">
The property you want in your JS is backgroundColor, so you would have:
document.getElementById('headerID1').style.backgroundColor = 'blue';
Background:
So... first shot with radio buttons triggering onclick javascript function.
I have a collection of radio buttons (name = 'div_select') that i'm attempting to pair each button with a specific div ('beginner1', 'beginner2', etc.). When the radio button is selected, I'm trying to set the zIndex of the paired div to be the highest via onclick.
Each of the paired divs are formatted via CSS so that they're all in the exact same location (#beginner1, #beginner2, #adept1, etc. {}).
At this point I'm attempting to make a different onclick for each pairing.
Issue:
I have not been having luck changing the zindex to bring the div to the foreground.
Question:
As I am fairly new to the html/javascript realm, the fairly blanket question would be "where am i going wrong?"
I have read through several posts (e.g., bring div element to front with zIndex and set zIndex onclick) to try and make some headway on my own, but I feel my skills in these languages are so limited that I'm at a fairly utter loss to understand what tags to even use.
Code in question
function highest_index() {
var highest_index
highest_index = highest_index +
}
function beg1() {
document.getElementByID('beginner1').style.zIndex = highest_index;
}
function adt1() {
document.getElementByID('adept1').style.zIndex = highest_index;
}
<form>
<!--
DOCK ON LEFT
-->
<div id="dok">
<div style="left: 0; width:100%;">
<p style="font-size: 12px; padding: 0%,1%,0%,0%; font-weight: bold;">
Beginner
</p>
<input type="radio" name="div_select" onclick="beg1()" />Video<br/>
<hr/>
<p style="font-size: 12px; padding: 0%,1%,0%,0%; font-weight: bold;">
Adept
</p>
<input type="radio" name="div_select" onclick="adt1()" />Video<br/>
<hr/>
</div>
</div>
<!--
OVERLAY BODY SECTIONS
-->
<div id="beginner1">
<table>
<tr>
<td style="font-weight: bold; font-size: 20px; text-align: left; width: 80%;">Label for Table</td>
</tr>
</table>
</div>
<div id="adept1">
<table>
<tr>
<td>second div intended to test </td>
</tr>
</table>
</div>
</form>
Edit to javascript based on comments section:
var highest_index = highest_index++;
}
function beg1() {
document.getElementByID('beginner1').style.zIndex = highest_index();
}
function adt1() {
document.getElementByID('adept1').style.zIndex = highest_index();
}
So there are quite a few issues here but I'll address them individually.
Your highest_index variable should be declared globally so that it isn't reset each time the function is called.
Having a variable and a function with the same name in the same scope will cause conflict. Change the name of one or the other.
highest_index+ should be highest_index++, or if you want to return the result at the same time you can use ++highest_index (both increment highest_index, but var++ returns the value before incrementing, whereas ++var returns the value after incrementing).
As 3 points out, you want to return the updated highest_index so that you can use it.
getElementByID is not a function (JS is case-sensitive!). Change ID to Id.
Feel free to remove the console.log()s that I've added; they're solely for demo purposes.
I've added comments to the code below to highlight the changes above by number.
var highest_index = 0; //1. Highest index declared globally
function getHighestIndex() { //2. Function renamed
return ++highest_index; //3 & 4. Increment and return
}
//5. GetElementByID changed to GetElementById
function beg1() {
document.getElementById('beginner1').style.zIndex = getHighestIndex();
console.log(`The z-index of beginner1 is ${document.getElementById('beginner1').style.zIndex}`);
}
//5. GetElementByID changed to GetElementById
function adt1() {
document.getElementById('adept1').style.zIndex = getHighestIndex();
console.log(`The z-index of adept1 is ${document.getElementById('adept1').style.zIndex}`);
}
<form>
<!--
DOCK ON LEFT
-->
<div id="dok">
<div style="left: 0; width:100%;">
<p style="font-size: 12px; padding: 0%,1%,0%,0%; font-weight: bold;">
Beginner
</p>
<input type="radio" name="div_select" onclick="beg1()" />Video<br/>
<hr/>
<p style="font-size: 12px; padding: 0%,1%,0%,0%; font-weight: bold;">
Adept
</p>
<input type="radio" name="div_select" onclick="adt1()" />Video<br/>
<hr/>
</div>
</div>
<!--
OVERLAY BODY SECTIONS
-->
<div id="beginner1">
<table>
<tr>
<td style="font-weight: bold; font-size: 20px; text-align: left; width: 80%;">Label for Table</td>
</tr>
</table>
</div>
<div id="adept1">
<table>
<tr>
<td>second div intended to test </td>
</tr>
</table>
</div>
</form>
So right now I have a section that has 3 tabs on it. Each tab is supposed to bring up a different table while simultaneously hiding the other 2 tables. When the page loads up it shows the first table (which it is supposed to do), but when I click one of the other two tabs nothing happens. I realize this has to be done with a Javascript onclick but I'm not familiar with it yet to know what I'm doing. I unfortunately have a lot of code that goes into making this work so i wont be able to post it on here but ill grab the code i think is most important and if you need any more info let me know. Please and thankyou for your help.
The tabs are "Pavement Section Editor", "Traffic", and "Condition"
HTML:
<div class='row' style="background-color: white; vertical-align:top; height: 250px;">
<div class="fifthDiv">
<br />
<article style="float: left; width: 100%; margin-left: 25px; height:250px;">
<section class="tabSection" id="tabmain">
<h2 class="large" style="font-size: 12px;">
Pavement Section Grid
</h2>
<p><div id="table_div_Main"></div></p>
</section>
#foreach (var layer in lstLayers)
{
if (layer != "Pavement Section" && layer != "Cores" && layer != "Inventory")
{
<section id="#("tab" + layer.Replace(" ", ""))" class="tabSection">
<h2 class="medium" style="font-size: 12px;">#layer</h2>
<p><div id="#("table_div_" + layer.Replace(" ", ""))"></div></p>
</section>
}
}
</article>
</div>
</div>
JAVASCRIPT:
function drawSectionData(data) {
return drawMe(data, 'Pavement Section Data', 'table_div_Main');
};
function drawTrafficData(data) {
return drawMe(data, 'Traffic Data', 'table_div_Traffic');
};
function drawConditionData(data) {
return drawMe(data, 'Condition Data', 'table_div_Condition');
};
//what i got so far on the javascript
$(".tabSection").children("h2").on('click', function() { console.log(this.closest("section")); })
The best way to implement tabs in your scenatio is to use jQuery Tabs - very easy and almost no additional coding required, and as added benfit it is free
Based on the assumption that:
You want to hide only the content that sits within the p of each
section and not hide the whole section itself because that would
mean that your click-able h2 will also become invisible.
You have removed div from within your section and are only using p
because inline elements do not allow to contain a block (in your
case, a div) element inside it. [Link], [Link] & [Link].
Your JavaScript code then may look like this:
var tabSections=$('.tabSection'); // select all .tabSection elements
tabSections.not('#tabmain').find('p').hide(); // hide all p elements found within tabSections stored above excluding #tabmain
tabSections.find('h2').on('click',function(){ // assign clicks to all h2 elements found within tabSections
tabSections.find('p').hide(); // hide all p elements found within tabSections
$(this).siblings('p').show(); // show the p element which is a sibling to the clicked h2 element
});
Snippet:
var tabSections=$('.tabSection');
tabSections.not('#tabmain').find('p').hide();
tabSections.find('h2').on('click',function(){
tabSections.find('p').hide();
$(this).siblings('p').show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class='row' style="background-color: white; vertical-align:top; height: 250px;">
<div class="fifthDiv">
<br />
<article style="float: left; width: 100%; margin-left: 25px; height:250px;">
<section class="tabSection" id="tabmain">
<h2 class="large" style="font-size: 12px;">
Main
</h2>
<p id="table_div_Main">Pavement Data</p>
</section>
<section class="tabSection" id="tabTraffic">
<h2 class="medium" style="font-size: 12px;">
Traffic
</h2>
<p id="table_div_Traffic">Traffic Data</p>
</section>
<section class="tabSection" id="tabCondition">
<h2 class="medium" style="font-size: 12px;">
Condition
</h2>
<p id="table_div_Condition">Condition Data</p>
</section>
</article>
</div>
</div>
Hope this helps.
i am making an information website for a school assignment, i want to have a button/s to make different information display on the page. how do i go about doing this in HTML or other applicable languages, Thanks
Use JavaScript!
<body>
<input id="button1" type="button" value="click me">
<input id="button2" type="button" value="click me, too">
<p id="output"></p>
<script>
/* Get references to your elements. */
var button1=document.getElementById("button1");
var button2=document.getElementById("button2");
var output=document.getElementById("output");
/* Add click event listeners to your buttons so you can interact with them. */
button1.addEventListener("click",clickButton1);
button2.addEventListener("click",clickButton2);
/* Write functions to handle displaying various content depending on which button you press. */
function clickButton1(event_){
output.innerHTML="You clicked button1!";
}
function clickButton2(event_){
output.innerHTML="You clicked button2!";
}
</script>
</body>
Basically, your click event listeners handle what to display when a button is pressed. I'm just changing the text in a p element, but you could do a lot more than that. For example, store the different html you want to display in hidden divs and only display them when a button is pressed. Hope this helps!
I believe you could do this in CSS as well, the big thing to note in the example is that each <a> has the #(id of div) in the href attribute. Since I don't know the exact context for your predicament, I can't say this would work how you want it to, but I just really dislike using javascript if I don't have to.
.container > div {
display: none
}
.container > div:target {
display: block;
}
ul.nav {
list-style-type: none;
}
ul li {
display: inline-block;
width: 100px;
}
ul li button {
border: 1px solid grey;
border-radius: 2px;
padding-left: 5px;
box-sizing: padding-box;
}
<ul class="nav">
<li>
<button>Tab 1
</button>
</li>
<li>
<button>Tab 2
</button>
</li>
<li>
<button>Tab 3
</button>
</li>
<li>
<button>Tab 4
</button>
</li>
<li>
<button>Tab 5
</button>
</li>
</ul>
<div class="container">
<div id="firstTab">Hello Tab 1</div>
<div id="secondTab">Hello Tab 2</div>
<div id="thirdTab">Hello Tab 3</div>
<div id="fourthTab">Hello Tab 4</div>
<div id="fifthTab">Hello Fifth Tab</div>
</div>
I got this show all thing succesfully done, but now when I click Show all and then click the text or image that opens, it puts the text below to right side of the screen.
JSFiddle
Gyazo
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>
$(function () {
$('.toggle-all').click(function() {
$('.printer').each(function () {
$(this).siblings('.gwinfo').slideToggle('slow');
});
});
});
</script>
<style>
.gwinfo {
display: none;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
.left{
display: block;
float:left;
width:10%;
}
</style>
General: Rest of code in JSFiddle, feel free to fix some of my code, I would appreciate that a lot. Also if you manage to fix my code, please post a JSFiddle link with fixed code. Thank you a ton, guys!
Instead of using the break tag to clear your floats, use a div. I also fixed some tags that were not properly nested.
<div style="clear: both;"></div>
http://jsfiddle.net/z2tSd/5/
Guess the tags are mis-matched.. Can you change your HTML to the one as below:
<div class="gwshowhide">
<li><a class="printer">Money Printer</a>
<div class="gwinfo">Level Requirement: 1
<br>Price: $1000
<br>Production:
<br>
<img src="images/shop/Amber Money Printer.png">
</div>
</li>
</div>
The existing one's are like where <li> tags are mismatching:
<div class="left">
<div class="gwshowhide">
<li><a class="printer">Money Silo</a>
<div class="gwinfo">Level Requirement: 85
<br>Price: $10,000
<br>Production:
<br>
<img src="images/shop/Diamond Money Silo.png">
</div>
</div>
</li>
</div>
Not sure if this will fix your issue though.. but you can give a try..
Also make sure you are suppressing the bullet list items using the style below:
.gwshowhide {
list-style:none;
}