Advanced Search

Results 1 to 10 of 10

Thread: Animated Collapsible DIV - keep one div shown at all times

  1. #1
    Join Date
    May 2012
    Location
    Wisconsin
    Posts
    9
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Question Animated Collapsible DIV - keep one div shown at all times

    1) Script Title: Animated Collapsible DIV v2.4

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...edcollapse.htm

    3) Describe problem: I am using the grouped examples 4,5,6 and it works great. But I am wonder if there is anyway when using the toggle method to always keep one of the DIV's shown?

    Example of what I want:
    If I close a div that is open, it automatically opens the other div that is closed in a group of two different div's.

    Currently if I click a closed div it opens and automatically closes the other div that is open in the group. (Just like examples 4-6 on the link above but with 2 div's) BUT if you click the open DIV it just closes it and you end up with 2 closed divs.

    Objective would to always have one of the div's being shown.

    Thanks for any help!

    Douglas

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,704
    Thanks
    43
    Thanked 3,133 Times in 3,097 Posts
    Blog Entries
    12

    Default

    Taking that same example, the pets group - Give each one a class of pets (from Step 2 on the demo page, showing only the markup for the group 'pets'):

    Code:
    <p><b>Example 4 (part of group "pets"):</b></p>
    
    <a href="#" rel="toggle[cat]" data-openimage="collapse.jpg" data-closedimage="expand.jpg"><img src="collapse.jpg" border="0" /></a> <a href="javascript:animatedcollapse.show('cat')">Slide Down</a> || <a href="javascript:animatedcollapse.hide('cat')">Slide Up</a>
    
    <div class="pets" id="cat" style="width: 400px; background: #BDF381;">
    The cat (Felis catus), also known as the domestic cat or house cat to distinguish it from other felines, is a small carnivorous species of crepuscular mammal that is often valued by humans for its companionship and its ability to hunt vermin. It has been associated with humans for at least 9,500 years. A skilled predator, the cat is known to hunt over 1,000 species for food. It can be trained to obey simple commands.
    </div>
    
    <p><b>Example 5 (part of group "pets"):</b></p>
    
    <a href="#" rel="toggle[dog]" data-openimage="collapse.jpg" data-closedimage="expand.jpg"><img src="collapse.jpg" border="0" /></a> <a href="javascript:animatedcollapse.show('dog')">Slide Down</a> || <a href="javascript:animatedcollapse.hide('dog')">Slide Up</a>
    
    <div class="pets" id="dog" style="width: 400px; background: #BDF381;">
    The dog (Canis lupus familiaris) is a domesticated subspecies of the wolf, a mammal of the Canidae family of the order Carnivora. The term encompasses both feral and pet varieties and is also sometimes used to describe wild canids of other subspecies or species. The domestic dog has been one of the most widely kept working and companion animals in human history, as well as being a food source in some cultures.
    </div>
    
    <p><b>Example 6 (part of group "pets"):</b></p>
    
    <a href="#" rel="toggle[rabbit]" data-openimage="collapse.jpg" data-closedimage="expand.jpg"><img src="collapse.jpg" border="0" /></a> <a href="javascript:animatedcollapse.show('rabbit')">Slide Down</a> || <a href="javascript:animatedcollapse.hide('rabbit')">Slide Up</a>
    
    <div class="pets" id="rabbit" style="width: 400px; background: #BDF381">
    Rabbits are ground dwellers that live in environments ranging from desert to tropical forest and wetland. Their natural geographic range encompasses the middle latitudes of the Western Hemisphere. In the Eastern Hemisphere rabbits are found in Europe, portions of Central and Southern Africa, the Indian subcontinent, Sumatra, and Japan.
    </div>
    Then in your init code, add the highlighted as shown (from Step1 on the Demo page, addDiv directives for the other examples removed):

    Code:
    <script type="text/javascript">
    
    animatedcollapse.addDiv('cat', 'fade=0,speed=400,group=pets')
    animatedcollapse.addDiv('dog', 'fade=0,speed=400,group=pets,persist=1,hide=1')
    animatedcollapse.addDiv('rabbit', 'fade=0,speed=400,group=pets,hide=1')
    
    animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
    	//$: Access to jQuery
    	//divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID
    	//state: "block" or "none", depending on state
    	if($(divobj).hasClass('pets')){
    		if(!$('.pets:visible').size()){
    			var divs = $('.pets').not(divobj), idx = divs.size();
    			animatedcollapse.show(divs.get(Math.floor(Math.random() * idx)).id);
    		}
    	}
    }
    
    animatedcollapse.init()
    
    </script>
    Last edited by jscheuer1; 05-09-2012 at 03:19 PM. Reason: spelling
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    phearfactor (05-09-2012)

  4. #3
    Join Date
    May 2012
    Location
    Wisconsin
    Posts
    9
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default

    Thanks alot! This is what I was looking for.

    Is there anyway to make them close/open at the same time? If not that is fine. It is good enough for me.

  5. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,704
    Thanks
    43
    Thanked 3,133 Times in 3,097 Posts
    Blog Entries
    12

    Default

    My gut tells me this is less reliable, but it appears to work fine in limited testing.

    Keep the added class attributes that we used before, and get rid of the added script code. Put this new code following the:

    Code:
    animatedcollapse.init()
    directive. New code:

    Code:
    jQuery(function($){
    	var classNames = ['pets'];
    	$.each(classNames, function(){
    		var className = this;
    		$('a').bind('click', function(){
    			var el, ex, rel = this.rel && (ex = /(toggle|collapse)\[([^\]]+)\]/.exec(this.rel))? ex : '';
    			if(rel && (el = $('#' + rel[2])).hasClass(className) && el.css('height') !== '1px' ||
    			/javascript:animatedcollapse\.(toggle|hide)/.test(this.href) &&
    			(el = $('#' + /\('([^']+)'\)/.exec(this.href)[1])).css('display') === 'block' && el.hasClass(className)){
    				var divs = $('.' + className).not(el), idx = divs.size();
    				animatedcollapse.show(divs.get(Math.floor(Math.random() * idx)).id);
    			}
    		});
    	});
    });
    For just the pets example, that's it. If you use a different class, change it in the array (highlighted in the above).

    If you have more than one group, expand the array (highlighted in the above), ex:

    Code:
    	var classNames = ['pets', 'otheranimals', 'people'];
    Just make sure you've configured those groups properly with addDiv and given each content div in them the appropriate class attribute.

    The browser cache may need to be cleared and/or the page refreshed to see changes.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. The Following User Says Thank You to jscheuer1 For This Useful Post:

    phearfactor (05-09-2012)

  7. #5
    Join Date
    May 2012
    Location
    Wisconsin
    Posts
    9
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default

    hmmm, doesn't seem to work right anymore. This was suppose to just collapse one and expand the other at the same time. Right? I am getting the same effect as before but now sometimes both items are expanded at the same time.


    I use "boxes" as my class but maybe I am adding the code to the wrong area. This is what I have for the whole script.

    Code:
    <script type="text/javascript">
    
    animatedcollapse.addDiv('rightBoxTop', 'fade=0,speed=400,group=boxes,persist=1,hide=0')
    animatedcollapse.addDiv('rightBoxBottom', 'fade=0,speed=400,group=boxes,persist=1,hide=0')
    
    animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
    	//$: Access to jQuery
    	//divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID
    	//state: "block" or "none", depending on state
    	if($(divobj).hasClass('boxes')){
    		if(!$('.boxes:visible').size()){
    			var divs = $('.boxes').not(divobj), idx = divs.size();
    			animatedcollapse.show(divs.get(Math.floor(Math.random() * idx)).id);
    		}
    	}
    }
    
    animatedcollapse.init()
    jQuery(function($){
    	var classNames = ['boxes'];
    	$.each(classNames, function(){
    		var className = this;
    		$('a').bind('click', function(){
    			var el, ex, rel = this.rel && (ex = /(toggle|collapse)\[([^\]]+)\]/.exec(this.rel))? ex : '';
    			if(rel && (el = $('#' + rel[2])).hasClass(className) && el.css('height') !== '1px' ||
    			/javascript:animatedcollapse\.(toggle|hide)/.test(this.href) &&
    			(el = $('#' + /\('([^']+)'\)/.exec(this.href)[1])).css('display') === 'block' && el.hasClass(className)){
    				var divs = $('.' + className).not(el), idx = divs.size();
    				animatedcollapse.show(divs.get(Math.floor(Math.random() * idx)).id);
    			}
    		});
    	});
    });
    </script>

    If its just not possible that is ok. I will just go back the previous code you gave me that worked great.

    Thanks for the help!
    Douglas

  8. #6
    Join Date
    May 2012
    Location
    Wisconsin
    Posts
    9
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default

    I also tried the code like this with the same result.


    Code:
    <script type="text/javascript">
    
    animatedcollapse.addDiv('rightBoxTop', 'fade=0,speed=400,group=boxes,persist=1,hide=0')
    animatedcollapse.addDiv('rightBoxBottom', 'fade=0,speed=400,group=boxes,persist=1,hide=0')
    
    animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
    	//$: Access to jQuery
    	//divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID
    	//state: "block" or "none", depending on state
    
    }
    
    animatedcollapse.init()
    jQuery(function($){
    	var classNames = ['pets'];
    	$.each(classNames, function(){
    		var className = this;
    		$('a').bind('click', function(){
    			var el, ex, rel = this.rel && (ex = /(toggle|collapse)\[([^\]]+)\]/.exec(this.rel))? ex : '';
    			if(rel && (el = $('#' + rel[2])).hasClass(className) && el.css('height') !== '1px' ||
    			/javascript:animatedcollapse\.(toggle|hide)/.test(this.href) &&
    			(el = $('#' + /\('([^']+)'\)/.exec(this.href)[1])).css('display') === 'block' && el.hasClass(className)){
    				var divs = $('.' + className).not(el), idx = divs.size();
    				animatedcollapse.show(divs.get(Math.floor(Math.random() * idx)).id);
    			}
    		});
    	});
    });
    </script>

  9. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,704
    Thanks
    43
    Thanked 3,133 Times in 3,097 Posts
    Blog Entries
    12

    Default

    Seems to work fine here (use your browser's 'view source' to see the code):

    http://home.comcast.net/~jscheuer1/s...lapse/demo.htm

    Notes: Even though the other demo collapsible divs are shown, only the pets are set up as a group with this added code.
    I am using a more recent version of jQuery, that might be it, or not . . .

    If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  10. The Following User Says Thank You to jscheuer1 For This Useful Post:

    phearfactor (05-10-2012)

  11. #8
    Join Date
    May 2012
    Location
    Wisconsin
    Posts
    9
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default

    Thanks again. It is working now. Comparing my source code to yours the only thing different was I was using the whole javascript line in html:

    Code:
     <div id="container">   <div id="rightBoxContainer">
    <a href="javascript:animatedcollapse.toggle('rightBoxTop')"  data-openimage="img/down_arrow_indexPG.jpg" data-closedimage="img/right_arrow_indexPG.jpg"> <img src="img/down_arrow_indexPG.jpg" width="20" height="20" border="0" /> What's New!</a> 
    <div class="clear_floats" ></div>
    <div id="rightBoxTop" class="boxes">Content for  id "right_container" Goes Here</div>
          
    <a href="javascript:animatedcollapse.toggle('rightBoxBottom')" data-openimage="img/down_arrow_indexPG.jpg" data-closedimage="img/right_arrow_indexPG.jpg"><img src="img/down_arrow_indexPG.jpg" width="20" height="20" border="0" />Our Green Commitment</a> 
    <div id="rightBoxBottom" class="boxes" >Content for  id "right_container_bottom" Goes Here</div></div>
    So I changed it to match yours like so:

    Code:
     <div id="container"><div id="rightBoxContainer">
          
    <a href="#" rel="toggle[rightBoxTop]" data-openimage="img/down_arrow_indexPG.jpg" data-closedimage="img/right_arrow_indexPG.jpg"><img src="img/down_arrow_indexPG.jpg" width="20" height="20" border="0" /> What's New!</a> 
          <div class="clear_floats" ></div>
    <div id="rightBoxTop" class="boxes">Content for  id "right_container" Goes Here</div>
          
    <a href="#" rel="toggle[rightBoxBottom]" data-openimage="img/down_arrow_indexPG.jpg" data-closedimage="img/right_arrow_indexPG.jpg"><img src="img/down_arrow_indexPG.jpg" width="20" height="20" border="0" />Our Green Commitment</a> 
          <div id="rightBoxBottom" class="boxes" >Content for  id "right_container_bottom" Goes Here</div></div>
    I thought the rel=toggle thing was short hand according to the script description but I guess it has to be written that way or my javascript line was wrong. Either way it works just the way I was hoping for now.

    Thanks! I really appreciate the assistance.

  12. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,704
    Thanks
    43
    Thanked 3,133 Times in 3,097 Posts
    Blog Entries
    12

    Default

    They should be equivalent, however I found I had to treat the rel= activations differently than the href="javascript: ones. I had tested all of both types except href="javascript:animatedcollapse.toggle, assuming it would be like the others of its type, but it's not.

    If you want to be able to use it with this setup, use this function in place of the one we've currently been using:

    Code:
    jQuery(function($){
    	var classNames = ['pets'];
    	$.each(classNames, function(){
    		var className = this;
    		$('a').bind('click', function(e){
    			var el, tog, ex, rel = this.rel && (ex = /(toggle|collapse)\[([^\]]+)\]/.exec(this.rel))? ex : '';
    			if(rel && (el = $('#' + rel[2])).hasClass(className) && el.css('height') !== '1px' ||
    			(tog = /javascript:animatedcollapse\.(toggle|hide)/.exec(this.href)) &&
    			(el = $('#' + /\('([^']+)'\)/.exec(this.href)[1])).css('display') === 'block' && el.hasClass(className)){
    				if(tog && tog[1] === 'toggle'){
    					e.preventDefault();
    					animatedcollapse.hide(el.get(0).id);
    				}
    				var divs = $('.' + className).not(el), idx = divs.size();
    				animatedcollapse.show(divs.get(Math.floor(Math.random() * idx)).id);
    			}
    		});
    	});
    });
    Note: I've highlighted the additions/changes, but it's easiest just to replace the entire block of code.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  13. The Following User Says Thank You to jscheuer1 For This Useful Post:

    phearfactor (05-10-2012)

  14. #10
    Join Date
    May 2012
    Location
    Wisconsin
    Posts
    9
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default

    I don't mind the rel= code way to do it. I'll keep what I got and call it done.

    Thanks again!

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •