?
Solved

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

Posted on 2012-09-18
9
Medium Priority
?
196 Views
Last Modified: 2012-12-16
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
0
Comment
Question by:Ian White
  • 4
  • 2
  • 2
  • +1
9 Comments
 
LVL 19

Expert Comment

by:Bardobrave
ID: 38409009
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
 

Author Comment

by:Ian White
ID: 38409098
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
 
LVL 83

Expert Comment

by:leakim971
ID: 38409137
line 1465 of scripts.js add the following :
$(".checked").each(function() {
    $(this).closest("ul").next(".arrow-link-down.more_less").trigger("click");
});
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 60

Expert Comment

by:Julian Hansen
ID: 38409188
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
 
LVL 19

Expert Comment

by:Bardobrave
ID: 38409200
The idea is the same... instead of firing the code when the page loads fire it when the report part loads...
0
 
LVL 60

Accepted Solution

by:
Julian Hansen earned 2000 total points
ID: 38409206
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
 

Author Comment

by:Ian White
ID: 38412020
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
 

Author Comment

by:Ian White
ID: 38439270
any
0
 

Author Closing Comment

by:Ian White
ID: 38696814
thanks
0

Featured Post

Prep for the ITIL® Foundation Certification Exam

December’s Course of the Month is now available! Enroll to learn ITIL® Foundation best practices for delivering IT services effectively and efficiently.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

840 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question