Justin Christian Justin Christian - 6 months ago 44
jQuery Question

Show Hidden Iframe on Click of Separate Div

Currently my site looks like this when loaded:
enter image description here

The description shows up on hover through css. I have the websites for each coworking space loaded up in iframes which are hidden for each coworking space box. My code currently works with showing all sites when the description is clicked and hiding when the X button is pressed.

For some reason when I try to use click by id it only opens the first coworking site box no matter what box I click. Here is what happens to show all. These sites are all the hidden iframes.

enter image description here

How can I select a box by id on click and show the corresponding website iframe? I think the problem I'm running into is all of these boxes are generated with a single for loop. Thoughts & Suggestions?

Here is my code:

<?php require_once('include/header.php')?>
<? require('include/navigation.php') ?>
<html>
<head>
<meta charset="utf-8">
<title>Coworking Spaces</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$( ".description" ).click(function() {
$(".website" ).show( "slow", function() {
// Animation complete.
});
$(".hideWebsite" ).show( "slow", function() {
});
});

$( ".hideWebsite" ).click(function() {
$(".website" ).hide( "slow", function() {
});
$(".hideWebsite" ).hide( "slow", function() {
});
});
});
</script>
</head>
<body>
<div id="container">
<div id='city_header'>
<div id='city_search'>
<h1>
Kansas City
</h1>
</div>
</div>
<div id="body">
<?php
for($i = 0; $i < count($cospaces); ++$i){
?>

<div class="company_box" style ="background-image: url(<?php echo($cospaces[$i]['image'])?>);">
<button class= "hideWebsite" type="button" name="button">X</button>
<iframe class= "website" src="<?php echo($cospaces[$i]['website']) ?>"></iframe>
<div class="name_box">
<h3 class="space_name"><?php echo($cospaces[$i]['name'])?></h3>
</div>
<div class="description">
<p><?php echo($cospaces[$i]['description']) ?></p>
</div>
</div>
<?php } ?>
</div>
<p class="footer">Page rendered in <strong>{elapsed_time}</strong> seconds</p>
</div>
</div>
</body>
</html>

Answer
    <script type="text/javascript">
      $(document).ready(function(){
        $( ".description" ).click(function() {
          $(this).siblings('.website').show('slow');
          $( ".hideWebsite" ).show("slow");
        });

        $( ".hideWebsite" ).click(function() {
          $(this).siblings('.website').hide('slow');
          $(this).hide("slow");
        });
      });
    </script>

This ought to fix you up. The reason why your code was only opening the first coworking site box is because you didn't specify which one you wanted to affect with your click.

The above code uses this to reference the thing the user clicked, which you can then tell the JavaScript to show or hide the iframe that's associated with the description that the user clicked.