How to hide all other div except one that is clicked?

Question

How to hide other and left just one that is click?

I tried something like this, but this doesn't work since all my divs has different ids

 $(document).ready(function() { $('.campingTrips').click(function(e) { var image = e.target, interval, height = 200, width = 200, z = $(this).css("z-index"); $(this).css("z-index", z + 10); $('#product-container').addClass('disable-click'); $('.unhidden').not($(this).parent().parent()).addClass('noOpacity'); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="campingTrips"> <h1>Camping trips</h1> </div> <div id="cityBreaks"> <h1>City breaks</h1> </div> <div id="roadTrips"> <h1>Road trips</h1> </div> <div id="cruises"> <h1>Cruises</h1> </div> <div id="groupTours"> <h1>Group tours</h1> </div> <div id="girlsTrips"> <h1>Girls' trips</h1> </div>

I'm using Java, Spring Boot, this is how I'm trying to include jQuery

<script src="webjars/jquery/1.9.1/jquery.min.js"></script>
<script src="webjars/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" th:src="@{/js/index.js}"></script>

Edit: NEW CODE

So my html is now like this:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="campingTrips" class="clickable"><h1>Camping trips</h1>
</div>

<div id="cityBreaks" class="clickable"><h1>City breaks</h1>
</div>

<div id="roadTrips" class="clickable"><h1>Road trips</h1>
</div>

<div id="cruises" class="clickable"><h1>Cruises</h1>
</div>

<div id="groupTours" class="clickable"><h1>Group tours</h1>
</div>

<div id="girlsTrips" class="clickable"><h1>Girls’ trips</h1>
</div>

And js like this:

$(document).ready(function () {
$('clickable').on('click', function () {
    var current = $(this).attr('id');
    $('clickable:not(#' + current + ')').hide();

})

})

Error from inspect console is:

Uncaught ReferenceError: $ is not defined
at index.js:119:1

Answer 1

you can do following:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="campingTrips">
  <h1>Camping trips</h1>
</div>

<div id="cityBreaks">
  <h1>City breaks</h1>
</div>

<div id="roadTrips">
  <h1>Road trips</h1>
</div>

<div id="cruises">
  <h1>Cruises</h1>
</div>

<div id="groupTours">
  <h1>Group tours</h1>
</div>

<div id="girlsTrips">
  <h1>Girls’ trips</h1>
</div>

and

  <script>
  $(document).ready(function() {
     $('div').on('click', function() {
        var current = $(this).attr('id');
        $('div:not(#' + current + ')').hide();
        
     })
  })

  </script>

It will hide every other div except the one that is clicked.

Answer 2

You can hide all and then show the clicked one, will have the same effect.

 $('.clickable').on('click', (e) => { // Hide all $('.clickable').hide(); // Show this $(e.target).closest('div').show(); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <div id="campingTrips" class="clickable"><h1>Camping trips</h1> </div> <div id="cityBreaks" class="clickable"><h1>City breaks</h1> </div> <div id="roadTrips" class="clickable"><h1>Road trips</h1> </div> <div id="cruises" class="clickable"><h1>Cruises</h1> </div> <div id="groupTours" class="clickable"><h1>Group tours</h1> </div> <div id="girlsTrips" class="clickable"><h1>Girls' trips</h1> </div>

But i strongly suggest to use a specific class for selecting those div elements, or base your code in a parent container.