Question

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?

Answer 1

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