CODEWITHSUNDEEP
javascriptjqueryhtml
Jon
Jon

Reputation: 976

How to hide certain children(). of a parent(). div?

I want to display only div.card1 when a user clicks on a selection menu I have made

<table id="flowerTheme">
  <tr>
    <td>
      <div class="card1">
         <div class="guess"><a href="#" id="flower1" class="quickFlipCta"><img src="Test Pictures/QuestionMark.gif" /></a></div>
         <div class="remember"><a href="#" class="quickFlipCta"><img src="Test Pictures/flower.gif" /></a></div>
      </div>
    </td>
    <td>
      <div class="card2">
         <div class="guess"><a href="#" id="flower1" class="quickFlipCta"><img src="Test Pictures/QuestionMark.gif" /></a></div>
         <div class="remember"><a href="#" class="quickFlipCta"><img src="Test Pictures/flower.gif" /></a></div>
      </div>
    </td>
  </tr>
</table>

I have a function that toggles the class 'selected' when the user clicks on an image. The following works perfectly:

if($('.flowerThemePic').hasClass('selected') && $('.sixCardLayout').hasClass('selected')) {
    $('#flowerTheme').css('display', 'inline');

However, as I stated before, I would like to have card2 to not be displayed. I have tried:

if($('.flowerThemePic').hasClass('selected') && $('.sixCardLayout').hasClass('selected')) {
        $('#flowerTheme').not('.card2').css('display', 'inline')

But this does not do anything. I have also tried:

if($('.flowerThemePic').hasClass('selected') && $('.sixCardLayout').hasClass('selected')) {
        $('#flowerTheme').find('div').not('.card2').css('display', 'inline')

But this hides both cards. What would be the right method of displaying card1 and not card2?

Upvotes: 1

Views: 174

Answers (5)

Jerska
Jerska

Reputation: 12002

What about :

$('#flowerTheme .card2').hide();

?

Upvotes: 2

thecodeparadox
thecodeparadox

Reputation: 87073

Try this:

$('#flowerTheme .card2').css('display','none').parent().show();

Demo

OR

$('#flowerTheme .card2').hide().parent().show();

Demo

Upvotes: 0

KRyan
KRyan

Reputation: 7598

First of all, it looks to me that card1 and card2 should be id, not class. The difference is that IDs are supposed to be unique, while classes are supposed to be re-used. Since you're using card1 and card2 to uniquely identify those cards, they should be IDs. Furthermore, they probably need a class as well: probably class="card", so they can be referred to as a group.

Secondly, I think you should be using CSS, not jQuery for the actual hiding/showing. Consider this:

table#flowerTheme.selection-made :not(.selected) .card
{
    display: none;
}

This would hide any element that has class="card" that doesn't have any parent with class="selected". Note the .selection-made on #flowerTheme -- this allows the default case to show every card, but then when someone clicks, you do $('#flowerTheme').addClass('selection-made'); and then $(this).addClass('selected'); (assuming you're using $(wherever selected goes).click() for this). It's a bit unclear from your question exactly where the selected class is being added, but I'd recommend doing it this way. It is far more easily maintained, jQuery has to do less work, and it leaves you with a very simple and easy way to expand the list of cards.

Upvotes: 2

Zhafur
Zhafur

Reputation: 1624

You can write a javascript function to hide children...

function hideSpecificChildren(childClass){
     var child = document.getElementByClass(childClass);
     if(tab.style.display == "block") {
        tab.style.display = "none";
     }else {
    tab.style.display = "block";
     }
}

Upvotes: 0

Mark Pieszak - Trilon.io
Mark Pieszak - Trilon.io

Reputation: 66941

$('#flowerTheme').css('display', 'inline');
$('.card2').hide();

Upvotes: 2

Related Questions