CODEWITHSUNDEEP
jquery
Codeninja
Codeninja

Reputation: 75

How to hide a div if only all items with same class are clicked

I have now edited the page and put the code here :

I am trying to hide a div when all the links with the class "all" have been clicked.

I only want when all the anchors with an id of "all" are clicked to hide the div#container.

            <!doctype html>
        <html lang="en">
        <head>

          <meta charset="utf-8" />
          <title>Combination filters &middot;</title>

          <!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->


          <link rel="stylesheet" href="../css/style.css" />



        </head>
        <body class="demos ">

          <section id="content">

            <h1>Find your top-load Tester</h1>
            <h3>Potential description Text</h3>


        <section id="options" class="clearfix combo-filters">




            <div class="option-combo height">
              <h4>Height (mm)</h4>
              <ul class="filter option-set clearfix " data-filter-group="height"> 
                <li><a id="all" href="#filter-height-any" data-filter-value="*" class="selected">All</a>

                  <li><a href="#filter-height-525" data-filter-value=".525">525 or less</a>

                  <li><a href="#filter-height-645" data-filter-value=".645">645 or less</a>

                  <li><a href="#filter-height-1265" data-filter-value=".1265">more than 1265</a>

              </ul>
            </div>

            <div class="option-combo width">
              <h4>Width &nbsp;(mm)</h4>
              <ul class="filter option-set clearfix " data-filter-group="width"> 
                <li><a id="all" href="#filter-width-any" data-filter-value="" class="selected">All</a>

                  <li><a href="#filter-width-134" data-filter-value=".134w">134 or less</a>

                  <li><a href="#filter-width-190" data-filter-value=".190w">190 or less</a>

                  <li><a href="#filter-width-290" data-filter-value=".290w">290 or less</a>

                  <li><a href="#filter-width-328" data-filter-value=".328w">328 or less</a>

                  <li><a href="#filter-width-420" data-filter-value=".420w">420 or more</a>

              </ul>
            </div>

            <div class="option-combo depth">
              <h4>Depth (mm)</h4>
              <ul class="filter option-set clearfix " data-filter-group="depth"> 
                <li><a id="all" href="#filter-depth-any" data-filter-value="" class="selected">All</a>

                  <li><a href="#filter-depth-134" data-filter-value=".134d">134 or less</a>

                  <li><a href="#filter-depth-190" data-filter-value=".190d">190 or less</a>

                  <li><a href="#filter-depth-290" data-filter-value=".290d">290 or less</a>

                  <li><a href="#filter-depth" data-filter-value=".328d">328 or less</a> 

                  <li><a href="#filter-depth-420" data-filter-value=".420d">420 or more</a>           
              </ul>
            </div>


            <div class="option-combo load">
              <h4>Load (kN)&nbsp;&nbsp;&nbsp;&nbsp;</h4>
              <ul class="filter option-set clearfix " data-filter-group="load"> 
                <li><a id="all" href="#filter-load-any" data-filter-value="" class="selected">All</a>

                  <li><a href="#filter-load-2.5" data-filter-value=".2-5l">2.5 or less</a>

                  <li><a href="#filter-load-5" data-filter-value=".5l">5 or less</a>

                  <li><a href="#filter-load-10" data-filter-value=".10l">10 or less</a>

                  <li><a href="#filter-load-25" data-filter-value=".25l">25 or less</a> 

                  <li><a href="#filter-load-50" data-filter-value=".50l">50 or more</a>           
              </ul>
            </div>


        </section> <!-- #options -->

        <div id="container" class="clearfix">

                <div id="data1" class="width-height-depth 525 134w 290w 290d 134d 2-5l">Datasheet1</div>

                <div id="data2" class="width-height-depth 645 190w 328w 328d 190d 5l">Datasheet2</div>

                <div id="data3" class="width-height-depth   525 50l 25l 10l 190w  328w 190d 328d   645 50l 25l 10l 134w  290w 134d 290d  ">Datasheet3</div>



                <div id="exit" class="width-height-depth 525 645 1265 420d 420w">This configuration is beyond the standard range of top-load testers. Please contact Mecmesin Sales to discuss ways to meet your requirements</div>

                    <div id="intro" class="width-height-depth">Please specify</div>


        </div> <!-- #container -->

        <script src="../js/jquery-1.7.1.min.js"></script>
        <script src="../jquery.isotope.min.js"></script>
        <script>
          $(function(){

            var $container = $('#container'),
                filters = {};

            $container.isotope({
              itemSelector : '.width-height-depth',

              masonry: {
                columnWidth: 80
              },
              filter: '#intro'
            });

            // filter buttons
            $('.filter a').click(function(){
              var $this = $(this);
              // don't proceed if already selected
              if ( $this.hasClass('selected') ) {
                return;
              }

              var $optionSet = $this.parents('.option-set');
              // change selected class
              $optionSet.find('.selected').removeClass('selected');
              $this.addClass('selected');

              // store filter value in object
              // i.e. filters.color = 'red'
              var group = $optionSet.attr('data-filter-group');
              filters[ group ] = $this.attr('data-filter-value');
              // convert object into array
              var isoFilters = [];
              for ( var prop in filters ) {
                isoFilters.push( filters[ prop ] )
              }
              var selector = isoFilters.join('');
              $container.isotope({ filter: selector });

              return false;
            });

             $('a').on('click', function(){

                $('#exit').hide();
                return false;

              });

              $('.filter a').on('click', function(){

                if( $(this).data('filter-value') == '.1265'  ) $('#exit').show();
                return false;



              });

              $('.filter a').on('click', function(){

                if( $(this).data('filter-value') == '.420d'  ) $('#exit').show();
                return false;



              });

                $('.filter a').on('click', function(){

                if( $(this).data('filter-value') == '.420w'  ) $('#exit').show();
                return false;



              });

                 $('.filter a').on('click', function(){

                 $('#intro').hide();
                return false;



              });








                          });



        </script>


            <footer>
             <p>If you cant find what you are looking for blah blah blah....</p>
            </footer>

          </section> <!-- #content -->


        </body>
        </html>

Thanks in advance.

Upvotes: 0

Views: 273

Answers (3)

moonwave99
moonwave99

Reputation: 22817

Markup:

<ul>
  <li><a href="#" class="all">Link</a></li>
  <li><a href="#" class="all">Link</a></li>
  <li><a href="#" class="all">Link</a></li>
</ul>
<div id="divToHide">Click all links to hide me</div>

JS:

var $links = $('.all');

$links.click(function(e){

  e.preventDefault();

  $(this).addClass('.clicked');

  if($links.length == $('.all.clicked').length){

    $('#divToHide').hide();

  }

})

Fiddle.

Upvotes: 1

Derek
Derek

Reputation: 4751

$('a.all').on('click', function(event) {
    var all_alls = $('a.all');
    var clicked_alls = $('a.all[data-clicked="true"]');
    if (all_alls.length == clicked_alls.length) {
        $('#exit').hide();
    }
    else {
        $(this).attr('data-clicked', 'true');
    }
});

Upvotes: 6

Josh
Josh

Reputation: 815

You can use .addClass to add a "clicked" class when you click on one of the divs in the "all" class. Each time, you also check to see if all divs in the "all" class also have "clicked". If they do, you can hide the div you'd like to hide.

Upvotes: 0

Related Questions