I'm new to Javascript and I'm working on a project. Thanks to help from a online help website, I'm able to show/hide my table successfully.
When I click the h3 element, it opens up and append the anchor (in this situation, #1, #2, #3) to the URL.
I want to use this anchor element to open up the specific table from an external link from another web page. (e.g. at Home Page, I clicked on this testing.html#1, I want it automatically open the 1st table when I reach the page)
Thank you very much!
JAVASCRIPT
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
function showonlyone(thechosenone) {
$('.newboxes').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).show(200);
}
else {
$(this).hide(600);
}
});
}
</script>
CSS
<style>
#special1{ display: none }
h3 {text-align: center;
background-color: black;
color: white;
clear: both;
cursor: pointer; }
.newboxes {
display: none;
}
a {text-decoration: none;}
</style>
HTML
<a id="myHeader1" onclick="javascript:showonlyone('newboxes1');" href="#1"><h3>Table 1</h3></a>
<table border="1" align="center" cellspacing="10px" class="newboxes" id="newboxes1">
<tr>
<td>1</td>
</tr>
</table>
<a id="myHeader2" onclick="javascript:showonlyone('newboxes2');" href="#2"><h3>Table 2</h3></a>
<table border="1" align="center" cellspacing="10px" class="newboxes" id="newboxes2">
<tr>
<td>2</td>
</tr>
</table>
<a id="myHeader3" onclick="javascript:showonlyone('newboxes3');" href="#3"><h3>Table 3</h3></a>
<table border="1" align="center" cellspacing="10px"class="newboxes" id="newboxes3">
<tr>
<td>3</td>
</tr>
</table>
Note this only work if you are loading from a html page in the same domain.
JQuery's .load function is very versatile. To load the first table from testing.html, we can do:
$('#tableContainer').load('testing.html table:eq(0)');
2nd table:
$('#tableContainer').load('testing.html table:eq(1)');
and so on.
demo
Note that the 3 tables in the demo are loaded from here
If the URL ends with #1, and you need showonlyone('newboxes1') automatically executed:
if (window.location.hash.substr(1) == '1') {
showonlyone('newboxes1');
}
Related
I have a simple table and I write some JS code in order to achieve that whole tr become a data-href. Everything works very nice except for one thing.
Now the whole row is clickable and that is fine, but there is a small issue, if you click on the delete button, it takes you to the update page (data-href), and I want to avoid that. So my question is how can I modify that code for the whole row to stay clickable except that delete button?
Here is my code:
$("tr").each(function() {
const $tr = $(this);
$tr.attr("data-href", $tr.find("a").attr("href"))
})
$('*[data-href]').on('click', function() {
window.location = $(this).data("href");
});
.modal {
padding:5px;
background-color:red;
color:#fff;
cursor: pointer
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<table>
<tr>
<td>Name</td>
<td> Age</td>
<td>
Update
<a data-toggle="modal" class="modal" data-target="#deleteModal">Delete</a>
</td>
</tr>
</table>
Can somebody try to help me with this?
To achieve this you can use the is() method to determine what element within the tr was clicked on. If it was an a element then you can prevent the window.location from being updated.
Also note that you can update the data-href of each tr using an implicit loop which makes the code slightly more succinct. Try this:
$('tr').attr('data-href', function() {
return $(this).find('a').attr('href');
});
$('*[data-href]').on('click', function(e) {
if (!$(e.target).is('a')) {
window.location.assign($(this).data("href"));
}
});
.modal {
padding: 5px;
background-color: red;
color: #fff;
cursor: pointer
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<table>
<tr>
<td>Name</td>
<td>Age</td>
<td>
Update
<a data-toggle="modal" class="modal" data-target="#deleteModal">Delete</a>
</td>
</tr>
</table>
I am new to Jquery, I have a requirement to show extra text only when mouse hover on the respective line
How can i change my jquery snippet without writing the same snippets 10 times for 10 different selectors
here the code:
<html>
<head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script >
jQuery(function() {
$("#demoTable1").hide();
$( "#demo1" ).mouseover(function() {
$("#demoTable1").show();
});
$( "#demo1" ).mouseout(function() {
$("#demoTable1").hide();
});
$("#demoTable2").hide();
$( "#demo2" ).mouseover(function() {
$("#demoTable2").show();
});
$( "#demo2" ).mouseout(function() {
$("#demoTable2").hide();
});
});
</script>
<style>
tr {
background: #b8d1f3;
}
td {
font-size: 12px;
color: #000;
}
</style>
</head>
<body>
<table>
<tr>
<td id='demo1'> Service : All services are running
<div id='demoTable1'> some text here 1 </div>
</td>
</tr>
<tr>
<td id='demo2'> Service : All services are running
<div id='demoTable2'> some text here 2 </div>
</td>
</tr>
</table>
</body>
</html>
You can do this using pure CSS, just make sure the element you are wanting to show is directly after the parent.
.child {
display: none;
}
.parent:hover .child {
display: inline;
}
<div class="parent">Hover over me
<div class="child">I will appear</div>
</div>
You can something like:
$("[id^='demoTable']").hide();
$("[id^='demo']").mouseover(function() {
$(this).find("div").show();
});
$("[id^='demo']").mouseout(function() {
$(this).find("div").hide();
});
tr {background: #b8d1f3;}
td {font-size: 12px;color: #000;padding: 10px;}
div {padding: 10px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td id='demo1'> Service : All services are running
<div id='demoTable1'> some text here 1 </div>
</td>
</tr>
<tr>
<td id='demo2'> Service : All services are running
<div id='demoTable2'> some text here 2 </div>
</td>
</tr>
</table>
Parameterizing jquery should be easy. Give each td a class of 'demo' and the inner div a class of 'demoTable'. Then you can do somethingl ike this:
$( ".demo" ).mouseover(function() {
$(this).find(".demoTable").show();
});
$(".demo").mouseout(function() {
$(this).find(".demoTable").hide();
});
The technique you're looking for is called 'Don't Repeat Yourself', or DRY. The simplest way to achieve that in your case is to use class attributes to group elements with common functionality. You can then use DOM traversal within the event handlers attached to those elements to find the related content and amend it.
In this case you can use the hover() event to toggle() the child div element, something like this:
jQuery(function($) {
$(".demo").hover(function() {
$(this).find(".demo-table").toggle();
});
});
tr { background: #b8d1f3; }
td {
font-size: 12px;
color: #000;
}
.demo-table { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td class="demo"> Service : All services are running
<div class="demo-table"> some text here 1 </div>
</td>
</tr>
<tr>
<td class="demo"> Service : All services are running
<div class="demo-table"> some text here 2 </div>
</td>
</tr>
</table>
With that being said, JS is not the best technology to use for this. CSS is far more appropriate, using the :hover pseudo-selector:
tr { background: #b8d1f3; }
td {
font-size: 12px;
color: #000;
}
.demo-table { display: none; }
.demo:hover .demo-table { display: block; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td class="demo"> Service : All services are running
<div class="demo-table"> some text here 1 </div>
</td>
</tr>
<tr>
<td class="demo"> Service : All services are running
<div class="demo-table"> some text here 2 </div>
</td>
</tr>
</table>
I have a table with each row representing a song.
When a song is clicked, the parent td should be highlighted a light blue color with the .active class and if any song was highlighted previously the parent td's .active class should be removed.
This part works fine and is represented with this jquery:
$(".songs").click(function(){
$('.songs').parents('td').removeClass('active');
$(this).parents('td').addClass('active');
});
I also want to have a next button and a previous button. This where I am having issues. When the next button is clicked, the next song on the list should be highlighted and the previously highlighted song should be unhighlighted (I am using the class .active to do the highlighting and unhighlighting). This part is not working:
$('#next_button').click(function(){
var current = $('td.active');
$('.songs').parents('td').removeClass('active');
current.nextAll('td:first').addClass('active');
});
Here is the jsfiddle link:
jsfiddle Link
Here is my html code:
<table id="song_table">
<thead id="song_thead">
<tr>
<th id="table_head">Songs</th>
</tr>
</thead>
<tbody id="song_tbody">
<tr>
<td class="td_songs">
<a class="songs">
1
</a>
</td>
</tr>
<tr>
<td class="td_songs">
<a class="songs">
2
</a>
</td>
</tr>
</tbody>
</table>
<div id="next_button">
<p id="next_text">Next Button</p>
</div>
Here is my css:
.active{
background-color: #D9FAFA;
}
table{
text-align: center;
height: 100px;
width: 200px;
}
#table_head{
text-align: center;
}
#next_button{
height: 100px;
width: 200px;
background-color: lightgreen;
}
Here is my jquery
$(document).ready(function() {
$(".songs").click(function(){
$('.songs').parents('td').removeClass('active');
$(this).parents('td').addClass('active');
});
$('#next_button').click(function(){
var current = $('td.active');
$('.songs').parents('td').removeClass('active');
current.nextAll('td:first').addClass('active');
});
});
If you could help me solve this issue, I would greatly appreciate it. I feel like this should be so easy but I just can't seem to make it work.
Thanks!
The trick is to get the row index of the current song, add 1, and then do a modulo with number of rows that way if the current row+1 overflows the number of rows, it will start from the beginning:
$().ready(function() {
$(".songs").click(function(){
$('.songs').parents('td').removeClass('active');
$(this).parents('td').addClass('active');
});
$('#next_button').click(function(){
//here .parent() will get the current <tr>
//.parent().index() will get the index of the current <tr>
var currentID = $('td.active').parent().index();
//here .parent() will get the <tr>
//.parent().parent() will get the <tbody>
//.parent().parent().children() will get all the rows
//.parent().parent().children().length will get the row count
var nextID=(currentID+1)%($('td.active').parent().parent().children().length)
$('.songs').parents('td').removeClass('active');
$('td').eq(nextID).addClass('active');
});
});
.active{
background-color: #D9FAFA;
}
table{
text-align: center;
height: 100px;
width: 200px;
}
#table_head{
text-align: center;
}
#next_button{
height: 100px;
width: 2d00px;
background-color: lightgreen;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="song_table">
<thead id="song_thead">
<tr>
<th id="table_head">Songs</th>
</tr>
</thead>
<tbody id="song_tbody">
<tr>
<td class="td_songs">
<a class="songs">
1
</a>
</td>
</tr>
<tr>
<td class="td_songs">
<a class="songs">
2
</a>
</td>
</tr>
<tr>
<td class="td_songs">
<a class="songs">
3
</a>
</td>
</tr>
<tr>
<td class="td_songs">
<a class="songs">
4
</a>
</td>
</tr>
</tbody>
</table>
<div id="next_button">
<p id="next_text">Next Button</p>
</div>
Something like this? http://jsfiddle.net/y5ntap04/3/
You needed to go up the DOM and then where all the siblings are, you can go to the next() one.
Plus added a previous button for you.
$().ready(function () {
$(".songs").click(function () {
$('.songs').parents('td').removeClass('active');
$(this).parents('td').addClass('active');
});
$('#next_button').click(function () {
$('.songs').parents('td.active').removeClass('active').closest('tr').next().find('td').addClass('active');
});
$('#previous_button').click(function () {
$('.songs').parents('td.active').removeClass('active').closest('tr').prev().find('td').addClass('active');
});
});
in your code you have each td in its own tr meaning there is no next td to go to.
you should adjust your jquery to focus on the rows, as in this fiddle (shown below)
$().ready(function() {
$(".songs").click(function(){
$('.songs').parents('tr').removeClass('active');
$(this).parents('tr').addClass('active');
});
$('#next_button').click(function(){
var current = $('tr.active');
$('.songs').parents('tr').removeClass('active');
current.next('tr').addClass('active');
});
});
You'll also notice I'm using .next() which will just grab the next element or the next element which matches the argument (in this case tr) - no need to get all then restrict to just the first.
All this will make your fiddle behave as expected, however, if you want to target the td's within each of the tr's you'll have to add .find('td') to get the td out of the retrieved tr, like this. Here the only line that is changed is the one that adds the class on click of next, which is now: current.parent().next('tr').find('td').addClass('active');
Refactoring out $('.songs').parents('tr').removeClass('active'); into it's own function would also clear your code a bit and make it easier to follow, a good habit! (also +1 for using a variable to store a returned JQuery DOM object - var current = $('tr.active'); - another good habit for code clarity and efficiency, especially when you are deraling with more complicated DOM structures and functions)
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.
I have the following site:
http://www.pachamber.org/www/advocacy/index.php
When a user clicks the 'General Commerce' href tag towards the bottom, it should slide out the hidden contents. All of the other tags work correctly except this one.
The function behaves unexpectedly only in IE. It looks to be fine in Chrome and FF. When debugging the function, it seems not not grab the height attribute from the div:
<div id="general" style="display: none; height: 30px; overflow: hidden">
The height attribute is showing as 1px on this line:
this.height = parseInt(this.obj.style.height);
Here is the snippit of HTML and the function call:
<table width="100%" border="0" cellspacing="0" cellpadding="6">
<tr>
<td colspan="2" style="width: 100%;">
<div class="subheading2" style="border-bottom: thin solid gray; cursor: pointer; color: #000099" onClick="doSlideOut('general');"><a name="general"></a>General Commerce</div>
</td>
</tr>
</table>
<div id="general" style="display: none; height: 30px; overflow: hidden">
<table width="100%" border="0" cellspacing="0" cellpadding="6">
<tr>
<td width="53%">
• <a href="gc/testimony/index.php" >Testimony & Comments</a>
</td>
<td width="47%"> </td>
</tr>
</table>
</div>
Any ideas what I am missing?
Thanks.
Beware of id and name attribute when using getElementById in Internet Explorer describes the stupid behaviour of IE which causes the problem of yours.
If there are two elements with the same value for id and name (in your case its the div with id general-commerce and the link General Commerce) IE will grab one of both of them when using getElementById.
The solution would be to change either the name-attribute of the link or the id of the div-container.
One thing I saw was and error in your script.
Errors like these break JS from running properly.
Check out one of my websites to see how to do this with jQuery (look at the links under "Our Curriculum").
$('.lgroup').on('click', function () {
if ($(this).hasClass('directLink')) {
return true
} else {
$('.links').slideUp();
$('.lgroup').removeClass('lactive');
if ($(this).next().css('display') == 'block') {
$(this).next().slideUp()
} else {
$(this).addClass('lactive').next().slideDown()
}
}
});