Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 1 of 1
  1. #1
    Junior Member
    Join Date
    Nov 2015
    Posts
    5
    Member #
    52419

    Accordion Menu and Isotope plugin problem

    Hello,

    I have this website where I'm trying to use an accordion menu to filter my isotope items.
    Now I have it working so far with both menu items and submenu items. However I can't seem to get the accordion working.
    What I'm trying to achieve is that when you click the item "2016" which has a sub-menu, it will filter the isotope items that have "2016" as a filter and that it shows the submenu items which are at first hidden.

    I've tried achieving it with css which doesnt work, and adding an extra code that will handle the drop down of the menu item doesn't work either.

    My question is...how am I going to get this done?

    This is the code I have so far:

    HTML Code:
    	<div class="container adventurelist"><!--Begin Adventure List-->
    		<div class="four columns">
    			<ul class="filters">
    				<li class="active"><a data-filter="*" href="#">Alles</a></li>
    			 	<li><a data-filter=".2016" href="#">2016</a>
    			 	 	<ul class="submenu">
    			 	 		<li><a data-filter=".oktober" href="#">Oktober</a></li>
    			 	 	</ul>
    			 	</li>
    			 	<li><a data-filter=".overig" href="#">Overig</a></li>
    			</ul>		
    		</div>
    		<div class="twelve columns">
    			<ul class="avonturen">
    				<li class="three columns isotope-item overig">
    					<p>Test Overig 1</p>
    				</li>
    				<li class="three columns isotope-item 2016">
    					<p>Test 2016 1</p>
    				</li>
    				<li class="three columns isotope-item 2016">
    					<p>Test 2016 2</p>
    				</li>
    				<li class="three columns isotope-item 2016 oktober">
    					<p>Test 2016-Oktober</p>
    				</li>
    			</ul>	
    		</div>
    	</div>
    This is the Jquery code:
    Code:
    <script type="text/javascript" src="js/isotope.pkgd.min.js"></script>
    
    <script>
    	var $workFilterLinks = $('.filters li'),
    	    $container = $('.avonturen');
    	 
    	$workFilterLinks.find('a').click(function(){
    	 
    	  $workFilterLinks.removeClass('active');
    	 
    	  $container.isotope({
    	    // options
    	    filter: $(this).attr('data-filter'),
    	    itemSelector: '.isotope-item',
    	    animationEngine : "best-available",
    	    masonry: {
    	      columnWidth: '.isotope-item'
    	    }
    	  });
    	 
    	  $(this).parent().addClass('active');
    	 
    	  return false;
    	});
    </script>
    Last edited by Juzbeingme; Sep 23rd, 2016 at 09:41 AM.

  2.  


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 08:45 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com