Java Script./ JQuery how to leave expand box open when filters clicked

This is the page with search filters on left column that refreshes content when clicked on right column
 
http://www.housecarers.com/test2/advanced-search-results-housesitters.cfm?co=Australia&HouseSitTerm=a&PetType=a,b
 
The filters - see div below. This is HTML5
in browsers Safari, Friefox, Chrome, IE9
 <div id="pets-list" class="checklink-box expandbox">
 <h3>Pet / Animal Care</h3>
 <ul class="checklink-list expand_content" data-type="PetType" data-height="90">
 
When a filter is checked after expansion the page refreshes but it remains closed even though a bullet has been checked within the expanded section. Hoe do I change script.js to be changed to cater for expanding (opening) each div when an item is checked below - eg For Pets Mice is checked.
 
The same applies for the other filters in the search in the left column

Thank you for your help
Ian WhiteOwner and FounderAsked:
Who is Participating?
 
Julian HansenConnect With a Mentor Commented:
Correction collapse true / false needs to be changed arround
    var collapse = true;
    $(this).find('a').each(function(i, e) {
      if ($(this).hasClass('checked') && i > 5) collapse = false;
    })
    if (collapse) {
      $(this).height($(this).attr('data-height'));
    }

Open in new window

0
 
BardobraveCommented:
You need to call the function you use to expand the elements on checked elements when loading the page.

So you'll need to do something like:

$('#yourCheckerElementsClass [checked="checked"]').each(function () {
    yourExpandFunction($(this));
});

When your page loads.
0
 
Ian WhiteOwner and FounderAuthor Commented:
The thing is the page does not load on clicking the filter. Only the report part of the page loads when clicking on the filter.
0
Cloud Class® Course: Microsoft Windows 7 Basic

This introductory course to Windows 7 environment will teach you about working with the Windows operating system. You will learn about basic functions including start menu; the desktop; managing files, folders, and libraries.

 
leakim971PluritechnicianCommented:
line 1465 of scripts.js add the following :
$(".checked").each(function() {
    $(this).closest("ul").next(".arrow-link-down.more_less").trigger("click");
});
0
 
Julian HansenCommented:
On around 1309 of scripts.js
$('.expandbox').each(function() {
  var box = $(this);
  
  box.find('.expand_content').each(function() {  
// ADD THIS
    var collapse = false;
    $(this).find('a').each(function(i, e) {
      if ($(this).hasClass('checked') && i > 5) collapse= true;
    })
    if (collapse) {
      $(this).height($(this).attr('data-height'));
    }
// TO HERE
  });
  
  box.find('.more_less').each(function() {
    $(this).click(function() {          
      if ( $(this).hasClass('arrow-link-down') ) {            
        $(this).html('Less').removeClass('arrow-link-down').addClass('arrow-link-up');
        
        box.find('.expand_content').each(function() {
          $(this).height($(this).prop('scrollHeight'));
        });
      }
      else {
        $(this).html('More').removeClass('arrow-link-up').addClass('arrow-link-down');
        
        box.find('.expand_content').each(function() {        
          $(this).height($(this).attr('data-height'));
        });
      }
    });
  });
});

Open in new window

What the above is doing is on load when it iterates through the .more_less boxes if the box has an item checked with an index in the list > 5 then don't collapse the box.
0
 
BardobraveCommented:
The idea is the same... instead of firing the code when the page loads fire it when the report part loads...
0
 
Ian WhiteOwner and FounderAuthor Commented:
Great thanks.

i had to move this to the test3 environment due to other changes

http://www.housecarers.com/test3/advanced-search-results-housesitters.cfm?PetType=a,b

Almost there. It is just when it is expanded, The More indicator is there instead of the less
More is not relevant as the section is fully expanded

I have the jscript change up at the url above

The more indicator shows on expansion with all browsers.
<div id="pets-list" class="checklink-box expandbox">
	<h3>Pet / Animal Care</h3>
<ul class="checklink-list expand_content" data-type="PetType" data-height="90">
....
<span class="arrow-link-down more_less">More</span>
</div>

Open in new window

0
 
Ian WhiteOwner and FounderAuthor Commented:
any
0
 
Ian WhiteOwner and FounderAuthor Commented:
thanks
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.