CODEWITHSUNDEEP
javascriptphpshow-hide
Alexander Trahaj
Alexander Trahaj

Reputation: 25

js fails to incorporate into php page

I have the following js code: 

<style>
<!--
body
{
font-family: "century schoolbook", serif;
font-size: 20px;
}
.hidden
{
display: none;
color: #000;
background: #FFFFFF;
}
.unhide
{
display: block;
color: #000;
}
a.unhide
{
text-decoration: none;
}
a.unhide:hover
{
text-decoration: underline;
}
.unhide:hover
{
background: #FFE5B4;
padding: 3px 8px;
display: table-row;
transition: background .25s ease-in-out;
-moz-transition: background .25s ease-in-out;
-webkit-transition: background .25s ease-in-out;
}
-->
</style>
<script type="text/javascript">
function unhide(divID) {
var item = document.getElementById(divID);
if (item) {
item.className = (item.className == 'hidden') ? 'unhide' : 'hidden';
}
}
</script>

...
<div class="conBoxcities">
<class id="info">
<a href="javascript:unhide('cityname');" class="unhide">
This is really a js link with a city name. Clicking brings down information about 
that city.
</a>
</class>

<class id="info">
<div id="cityname" class="hidden">
This is where the content of the above link appears. It is just an info blurb,    
basically.
This js script works here. On the other page it does not. I believe I messed up 
somewhere in my classes...please help
</div>
</class>
</div>

The above code works perfectly well on a "bare" php page

When I incorporate it into my main page, the js links no longer function. I believe i may have a mistake in my arrangement (admittedly, classes and ids still confuse me).

This is the page where the link appears, but does not work.

Please help...

Upvotes: 0

Views: 49

Answers (1)

Mark
Mark

Reputation: 1386

The problem is that in your "live" page you have redefined the function unhide with this code:

function unhide(divID) {
    var item = document.getElementsByClassName(divID)[0];
    console.log(item);
    console.log(item.className ==  divID + ' hide');
    if (item) {
    item.className = (item.className ==  divID + ' hide') ? divID + ' unhide' : divID + ' hide';
    }
}

If you remove, our comment out that code, everything works as expected.

Upvotes: 2

Related Questions