I am a beginner in Jquery and Js, I would like that when we press the plus and the minus it hides only the main element and the same with the first element. except that when I press the plus or minus button of the main element, it also show / hides the first element .I want to show and hide separately.
I ask for your help please
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"/>
</head>
<body>
<section>
<div class="container">
<table id="table" class="table_ele">
<thead>
<tr>
<th>Main element</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href="#" class="btn btn-dark float-left">element1</a>
</td>
</tr>
<tr>
<td>
<a href="#" class="btn btn-dark float-left">element2</a>
</td>
</tr>
<tr>
<td>
<a href="#" class="btn btn-dark float-left">element3</a>
</td>
</tr>
<tr>
<td>
<a href="#" class="btn btn-dark float-left">element4</a>
</td>
</tr>
<tr>
<td>
<a class='clickable-more' href="#"><i class="fas fa-plus-square"></i></a>
<a class='clickable-minus' style="display: none" href="#"><i class="far fa-minus-square"></i></a>
</td>
</tr>
<tr class="tr_more">
<td>
<a href="#" class="btn btn-dark float-left">element5</a>
</td>
</tr>
<tr class="tr_more">
<td>
<a href="#" class="btn btn-dark float-left">element6</a>
</td>
</tr>
</tbody>
</table>
<table id="table" class="table_ele">
<thead>
<tr>
<th>First element</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href="#" class="btn btn-dark float-left">elementA</a>
</td>
</tr>
<tr>
<td>
<a href="#" class="btn btn-dark float-left">elementB</a>
</td>
</tr>
<tr>
<td>
<a href="#" class="btn btn-dark float-left">elementC</a>
</td>
</tr>
<tr>
<td>
<a href="#" class="btn btn-dark float-left">elementD</a>
</td>
</tr>
<tr>
<td>
<a class='clickable-more' href="#"><i class="fas fa-plus-square"></i></a>
<a class='clickable-minus' style="display: none" href="#"><i class="far fa-minus-square"></i></a>
</td>
</tr>
<tr class="tr_more">
<td>
<a href="#" class="btn btn-dark float-left">elementE</a>
</td>
</tr>
<tr class="tr_more">
<td>
<a href="#" class="btn btn-dark float-left">elementF</a>
</td>
</tr>
</tbody>
</table>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function($) {
$('.tr_more').hide();
$(".clickable-more").on('click', function() {
$(this).hide();
$('.tr_more').show();
$(this).next('a').show();
});
$(".clickable-minus").on('click', function() {
$(this).hide();
$('.tr_more').hide();
$(this).prev('a').show();
});
});
</script>
</html>
>Solution :
The reason that the click hides all the tr_more elements is because in your code, you are hiding and showing all the elements with the class tr_more irrespective of which table it is.
One approach would be to select the tr_more element which is part of the table which you are clicking by using the closest() to find the parent table and then using find() to get the tr_more elements of that particular table that is clicked. Try the below code.
<script>
jQuery(document).ready(function($) {
$('.tr_more').hide();
$(".clickable-more").on('click', function() {
$(this).hide();
$(this).closest('table').find('.tr_more').show();
$(this).next('a').show();
});
$(".clickable-minus").on('click', function() {
$(this).hide();
$(this).closest('table').find('.tr_more').hide();
$(this).prev('a').show();
});
});
</script>
A better approach would be to use jquery toggleClass to toggle a class name for the tr_more elements and change the display property for that class name using css. Not the exact code below, but it’s a start
.tr_more.show {
display: block;
}
$('.clickable-more').on('click', function() {
$(this).closest('table').find('.tr_more').toggleClass('show');
})