CODEWITHSUNDEEP
javascripthtmlhide
thecore7
thecore7

Reputation: 484

javascript show hide div by id issue

I have a list with divs that contain information for cities. I have also a list of the cities so visitor can click on a city and than all other's cities divs must hide.
If visitor clicks back on the city link the hidden divs must show again. So far I have a working function but it only works fo London. If I click on Paris - no errors and no actions. What causes this? Thanks

UPDATED

<script language="javascript" type="text/javascript" charset="utf-8">      
function showHideDiv(city_id) {    
var divstyle = new String();    
divstyle = document.getElementById(city_id).style.visibility;    
if (divstyle.toLowerCase() == "visible" || divstyle == "") {     
document.getElementById("city_id").style.visibility = "hidden";    
document.getElementById("city_id").style.position = "absolute";             
}else{     
document.getElementById("city_id").style.visibility = "visible";    
document.getElementById("city_id").style.position = "relative";    
}    
}    
$(document).ready(function() {    
$(".city").click(function() {    
$(this).toggle();    
});    
});    
</script>    
<a href="#" id="<?php echo $city;?>" onclick="showHideDiv()" style="text-decoration:underline;">London | Paris</a></div>    
<div id="London">List of providers in London here as content</div>    
<div id="Paris">List of providers in Paris here as content</div>

Upvotes: 1

Views: 4665

Answers (1)

Julio
Julio

Reputation: 2290

I would imagine it has to do with the fact that your Javascript has the city hard coded in it. I presume (without seeing the PHP) that you are echoing "London" here:

<?php echo $city;?>

So anytime showHideDiv() is called, it only gets called on London, and not Paris. You probably need to pass in the id as a parameter into the function.

You may consider looking at jQuery. It would make this easy.

EDIT

Using your code, you'd pass in the parameter as follows:

function showHideDiv(city_id) {
    var divstyle = new String();
    divstyle = document.getElementById(city_id).style.visibility;
    // . . . Rest of your code. Replace all instances of <?php echo . . ?> with 
    // city_id.
}

Then you'd have to specify the city in your onclick for each city.

Using jQuery, you could do something like:

$(document).ready(function() {
    $(".city").click(function() {
        $(this).toggle();
    });
});

And then your HTML would be:

<div id="london" class="city">List of providers in London</div>
<div id="paris" class="city">List of providers in Paris</div>

Upvotes: 2

Related Questions