Joséph Flames Joséph Flames - 2 months ago 9
Javascript Question

.each opens all containers instead on one

I have some code which should when a button is clicked open the container pertaining to that button but for some reason no matter how many tweaks i add to the coding (both jquery and html) it always seems to open all containers not relevant to its children

So this is my coding



function Toggle(){
$('.openable').each(function(){
if($(this).hasClass('open')){
$(this).children().addClass('hidden');
$(this).removeClass('open');
}else{
$(this).children().removeClass('hidden');
$(this).addClass('open');
}
});
}

<div class="spanHold">
<?
$sql = "SELECT * FROM movieHosting WHERE name='$name' ORDER BY id ASC";
$query = mysql_query($sql);

while($row = mysql_fetch_object($query)){
$id = $row->id;
$name = $row->name;
$season = $row->season;
$episode = $row->episode;
$type = $row->type;

if($type == "movie"){
echo "
<div onclick='Toggle()' class='container'>
<button type='button' class='btn btn-block btn-primary'>Movie: $season</button>
<div class='openable'>
<a class='videoLink hidden' href='play.php?id=$id' target='_BLANK'>Play</a>
</div>
</div>
";
}else{
echo "
<div onclick='Toggle()' class='container'>
<button type='button' class='btn btn-block btn-primary'>Season: $season Episode: $episode</button>
<div class='openable'>
<a class='videoLink hidden' href='play.php?id=$id' target='_BLANK'>Play</a>
</div>
</div>
";
}
}
?>
</div>





to demonstrate the issue in a working example for a fiddle(not resolved just to show the issue)

here is a little fiddle



function Toggle(){
$('.openable').each(function(){
if($(this).hasClass('open')){
$(this).children().addClass('hidden');
$(this).removeClass('open');
}else{
$(this).children().removeClass('hidden');
$(this).addClass('open');
}
});
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>

<div class="spanHold">
<div onclick='Toggle()' class='container'>
<button type='button' class='btn btn-block btn-primary'>Movie: 1</button>
<div class='openable'>
<a class='videoLink hidden' href='play.php' target='_BLANK'>Play</a>
</div>
</div>

</div>

<div class="spanHold">
<div onclick='Toggle()' class='container'>
<button type='button' class='btn btn-block btn-primary'>Movie: 2</button>
<div class='openable'>
<a class='videoLink hidden' href='play.php' target='_BLANK'>Play</a>
</div>
</div>

</div>





If you run the above example and you click movie 1 you will notice that both the movie 1 and movie 2 containers are opened the end goal is for only the container pertaining to the btn clicked is opened

BONUS:

If you can give a working example for the below i will open a bounty and award it to the best answer

-If btn is clicked when user clicks another btn previously opened container is shut

Answer
  1. Instead of setting the Toggle function inline (in the html) you should just listen to the click event on the .container elements.
  2. Instead of finding all of the .openable elements - you should find only the .openable elements that are in the specific container you just clicked.
  3. If you want to make sure that every click will close the other "opened" tabs, you should check of the opened tabs and hide them

For #3 you can use this code:

$('.container').not(this).find('.open').each(function() {
    $(this).children().addClass('hidden');
    $(this).removeClass('open');
});

Here is a working example:

$(function() {
  $('.container').on('click', function() {
    
    // Hide other opened tabs, if any exists
    $('.container').not(this).find('.open').each(function() {
      $(this).children().addClass('hidden');
      $(this).removeClass('open');
    });

    // Find the openable content inside the current container (the one we clicked) and open/close it
    $(this).find('.openable').each(function(){
      if($(this).hasClass('open')){
        $(this).children().addClass('hidden');
        $(this).removeClass('open');
      }else{
        $(this).children().removeClass('hidden');
        $(this).addClass('open');
      }
    });
  });
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>

    <div class="spanHold">
                	<div class='container'>
                    					<button type='button' class='btn btn-block btn-primary'>Movie: 1</button>
                    					<div class='openable'>
                    						<a class='videoLink hidden' href='play.php' target='_BLANK'>Play</a>
                    					</div>
                    				</div>
      
                </div>

<div class="spanHold">
                	<div class='container'>
                    					<button type='button' class='btn btn-block btn-primary'>Movie: 2</button>
                    					<div class='openable'>
                    						<a class='videoLink hidden' href='play.php' target='_BLANK'>Play</a>
                    					</div>
                    				</div>
      
                </div>

Comments