CODEWITHSUNDEEP
javascript
devnoob
devnoob

Reputation: 17

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

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

Upvotes: 2

Views: 106

Answers (2)

samnoon
samnoon

Reputation: 1743

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.

Upvotes: 1

DontVoteMeDown
DontVoteMeDown

Reputation: 21465

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.

Upvotes: 2

Related Questions