CODEWITHSUNDEEP
jquery
Pawan
Pawan

Reputation: 32321

How to hide other div's except the required one?

I have a got HTML as shown below 

<div class="inner-accordion">
   <div id="activeui4" class="activateUiHTML" data-role="collapsible">
      <div style="display: block;" class="Topping-details" id="4">
         <section id="topping_tsection_4">
         </section>
      </div>
   </div>
   <div id="activeui5" class="activateUiHTML" data-role="collapsible">
      <div style="display: block;" class="Topping-details" id="5">
         <section id="topping_tsection_5">
         </section>
      </div>
   </div>
   <div id="activeui6" class="activateUiHTML" data-role="collapsible">
      <div style="display: block;" class="Topping-details" id="6"></div>
   </div>
</div>

On click of a button , i am calling a function to which i will be passing the id .

function showToppers(id)
{
var id  =4 ;
$('#activeui'+id+'.activateUiHTML').find(".Topping-details").toggle();
}

My requirement is that how can i hide/block all the other class Topping-details except the for id 4 in this case ??

Upvotes: 2

Views: 724

Answers (6)

Moob
Moob

Reputation: 16184

Simply hide ALL of them then show the one you want:

function showToppers(id){
    $(".Topping-details").hide();//hide all of them 
    $('#activeui'+id+'.activateUiHTML').find(".Topping-details").show();//show the one you want
}

UPDATED VERSION to address OP's comment about how to close the open one.

function showToppers(id){
    $(".Topping-details").not("#"+id).hide();//hide all of them but the target one
    var $theoneiwant = $('#activeui'+id+'.activateUiHTML').find(".Topping-details");//store the target in a variable for efficiency
    if($theoneiwant.is(":visible")){//if it is open,
        $theoneiwant.hide();//close it
    } else {//its closed
        $theoneiwant.show();//open it
    }
}

Upvotes: 2

PeterKA
PeterKA

Reputation: 24638

DEMO

DEMO 2 ... using jQuery.toggleClick plugin to toggle on n clicks.

I would recommend using non-numeric ids, and instead of hard-coding the id in the function, you can use a data attribute to hold the target id in the button.

HTML

<button class="hider" data-hide-id="i4">Just i4</button>
<button class="hider" data-hide-id="i5">Just i5</button>
<button class="hider" data-hide-id="i6">Just i6</button>
<div class="inner-accordion">
   <div id="activeui4" class="activateUiHTML" data-role="collapsible">
      <div style="display: block;" class="Topping-details" id="i4">
         <section id="topping_tsection_4">
         </section>
      </div>
   </div>
   <div id="activeui5" class="activateUiHTML" data-role="collapsible">
      <div style="display: block;" class="Topping-details" id="i5">
         <section id="topping_tsection_5">
         </section>
      </div>
   </div>
   <div id="activeui6" class="activateUiHTML" data-role="collapsible">
      <div style="display: block;" class="Topping-details" id="i6"></div>
   </div>
</div>

JS

$(function() {
    $('.hider').on('click',function() {
        var id = $(this).data('hide-id');
        $('.Topping-details').show().not('#' + id).hide();
    });
});

Upvotes: 1

vikrant singh
vikrant singh

Reputation: 2111

Use jQuery:not() selector

$('#activeui'+id+'.activateUiHTML').find(".Topping-details:not('#4')").hide();

Upvotes: 1

Raja Sekar
Raja Sekar

Reputation: 2130

function hideSection(idToHide){
$(".Topping-details").each(function(){
    if(this.id == idToHide) {
        $(this).show();
    }else{
        $(this).hide();
    }
});
});
}

Call this function in button click..

Upvotes: 0

Martinspire
Martinspire

Reputation: 591

$(".activateUiHTML").removeClass("active");
$("#activeui" + id).addClass("active");

Where the class active will have a

.activateUiHTML.active{
    display: block;
}

And normally it has

.activateUiHTML{
    display:none;
}

Doing it with CSS is much cleaner and works better on older/slower devices

Upvotes: 0

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

Try this : Use .not() to filter topping-details with id=4

$('.Topping-details').not('#4').hide();

Upvotes: 8

Related Questions