Having an element control a following element if one is already hidden

[dmei4]

I'm new to jQuery and I notice a minor technical detail in a page I'm building. I have title that slidetoggles the content underneath. Within the content it also switches itself out to an active gallery. However when the initial element is hidden and I click the title it makes it appear again. I want the title to toggle the container that is showing. I'm not sure how to do so. I have some diagrams on how it works. If you want to look at the code I can attach that as well.I was suggested to use this $('#title').nextAll(':visible').slideToggle(); instead. However, it doesn't allow me the ability to toggle back the container I just hid, which is what I want it to.

[dsonesuk]

you can't use toggle function on two different elements to hide and show the same container, they work independently from each other.click element 1: shows div containerclick element 2: shows div container ( will look as though nothing happened)click element 2: hides div containerclick element 1: hides div container ( (current state show / now hide) will look as though nothing happened)

[dmei4]

So is there a work around to have it work as such?

[dsonesuk]

you use the click function on both, you look at what state it is in hidden usually display:none; or showing usually display block, if it is hidden change to show else change to hidden. similar to$(this).next("div.hideshow").css('display') == "none" ? $(this).next("div.hideshow").show() : $(this).next("div.hideshow").hide()

[dmei4]

Do I have to have the display set on the CSS or does jquery already assigns it that. One thing I was not certain about in jquery was when you use toggle, does it give the class a display property or is something else.

[dsonesuk]

toggle as it suggests, toggles between one function to show(), fadein() for example, and hide(), fadeout() the functions are separated by a comma. toggle remembers what was chosen before, and then assigns the alternative function the next time.show() assigns display:block to element, hide() assigns display:none to element. you might want to hide it on loading of page using, $(document).ready(function() { $(".show_hide_container").hide();....}as by setting display hidden through css, will result in content not being shown if javascript disabled, but using above it will only be hidden if javascript is enabled.if you use firebug, and observe the elements where show() and hide() are used, you will see inline styling changing from one to the other on clicking.

[dmei4]

It didn't work the way I was expecting it to,I did another diagram of the actual site.

[dsonesuk]

let me get this righttitleex will only open sWork IF intWork is closed.only one of the containers sWork OR intWork will be open at one time, by use of show_hide class in the img and link in sWork and? intWork??if sWork is the small thumbnail image container, intWork is the slideshow image container, where the..what the fluff is the relationship of the two large interior images too?

[dmei4]

If possible it would be ideal to have titleex open and close whichever contentex container is opened or just have it where titleex doesn't do anything when intWork is visible.What do you mean two interior images? in sWork is an excrept and a thumbnail and in intWork is a slideshow with full description.Sorry if I'm not specific enough.

[dsonesuk]

either method for the titleex is not a problem, its the two images under title personal kill, when do they show/hide? from what i understand.start with just title showing. (only works when intWork is not visible)click title shows sWork. (thumbnail image and text)clicking image or link in sWork opens intWork, and at sametime closes sWork.(slideshow images with text)clicking image or link in intWork opens sWork, and at same time closes intWork (thumbnail image and text)when does personal kill images + text appear??

[dmei4]

Oh sorry for the misunderstanding. Personal Kill functions the same as screentime. Is just another container for that piece of work.Just to clairfy.Start on page load with just sWork showing (intWork is not visible)clicking title will hide/show sWorkclicking image or link will open intWork and closes sWorkclicking link will open sWork and closes intWork

[dsonesuk]

moving goal posts again, you are now asking for a third option for clicking title(1)alternate hide/show sWork with intWork(2)hide sWork and show intWork then disable title show/hide when intWork visible(3)now hide/show sWork onlyi've supplied all 3, the first option is the one, i think you are looking for, i've commented out the other two, so you can test all by swapping the /* */

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script><script type="text/javascript">/*<![CDATA[*//*---->*/$(document).ready(function()	{		//$(".sWork").hide();	$(".intWork").hide();		$("a.show_hide").attr({href: "java script:void(null)"});		var thisstring = $("#intText p:first-child").html();	$("#text p:first-child").html(thisstring+'..<a href="java script:void(null)" class="show_hide">~more</a>');		$("#title").click(function ()		{				// Option #1: START ALTERNATE showing of sWork and intWork		if($(this).next(".sWork").css("display")=="none")			{			$(this).next(".sWork").show();			$(this).parents("#work").children(".intWork").hide();			}		else			{			$(this).next(".sWork").hide();			$(this).parents("#work").children(".intWork").show();			}			//END ALTERNATE showing of sWork and intWork			 		// Option #2: START: HIDE sWork and SHOW intWork ONLY when intWork is NOT visible		/*if($(this).parents("#work").children(".intWork").css("display")=="none")			{			$(this).next(".sWork").hide();			$(this).parents("#work").children(".intWork").show();			 }*/			//END: HIDE sWork and SHOW intWork ONLY when intWork is NOT visible 			 		// Option #3: START: HIDE/SHOW sWork ONLY when intWork is NOT visible		/*if($(this).parents("#work").children(".intWork").css("display")=="none")			{			$(this).parents("#work").children(".sWork").css("display")=="none" ? $(this).parents("#work").children(".sWork").show() : $(this).parents("#work").children(".sWork").hide();			}*/			// END: HIDE/SHOW sWork ONLY when intWork is NOT visible					});		$(".sWork img.show_hide").click(function () {		$(this).parents(".sWork").css("display")=="none" ? $(this).parents(".sWork").show() : $(this).parents(".sWork").hide();		$(this).parents(".sWork").next(".intWork").css("display")=="none" ? $(this).parents(".sWork").next(".intWork").show() : $(this).parents(".sWork").next(".intWork").hide();		});			$(".sWork a.show_hide").click(function () {	$(this).parents(".sWork").css("display")=="none" ? $(this).parents(".sWork").show() : $(this).parents(".sWork").hide();	$(this).parents(".sWork").next(".intWork").css("display")=="none" ? $(this).parents(".sWork").next(".intWork").show() : $(this).parents(".sWork").next(".intWork").hide();	});		$(".intWork a.show_hide").click(function () {	$(this).parents(".intWork").css("display")=="none" ? $(this).parents(".intWork").show() : $(this).parents(".intWork").hide();	$(this).parents(".intWork").prev(".sWork").css("display")=="none" ? $(this).parents(".intWork").prev(".sWork").show() : $(this).parents(".intWork").prev(".intWork").hide();	});			$(".intWork img.show_hide").click(function () {	$(this).parents(".intWork").css("display")=="none" ? $(this).parents(".intWork").show() : $(this).parents(".intWork").hide();	$(this).parents(".intWork").prev(".sWork").css("display")=="none" ? $(this).parents(".intWork").prev(".sWork").show() : $(this).parents(".intWork").prev(".intWork").hide();		});				});/*--*//*]]>*/</script><style type="text/css">*{padding:0;margin:0;}body{font-family:Verdana, Arial, Helvetica, sans-serif; font-size:62.5%;}p{margin:1em 0;}h1, h2, h3, h4, h5, h6{margin:0.9em 7px;}h1 {padding:0;font-size:2em;}h2 {padding:0;font-size:1.84em;}h3 {padding:0;font-size:1.68em;}h4{padding:0;font-size:1.52em;}h5 {padding:0;font-size:1.36em;}h6 {padding:0; font-size:1.20em;}#work {width:960px; margin:0 auto;}a.show_hide{text-decoration:none; color:#999999;}#intText a.show_hide{display:block; height:25px; float:left; line-height:25px;}a.show_hide:hover{text-decoration:underline; color:#0000FF;}#intNav{overflow:hidden;}a.prev, a.next {padding:0 12px; display:block; float:left; cursor:pointer; height:25px;}</style></head><body><div id="work"><h1 id="title">Title</h1><div class="sWork"><img class="show_hide" src="image_thumb.gif" alt="" /><div id="caption"></div><div id="text"><p><a href="#" class="show_hide">~more</a></p></div></div><!-- end class sWork --><!-- xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx --><div class="intWork"><img  src="largeImage.jpg" class="show_hide" /><div id="intCaption"></div><div id="intNav"><a class="prev"><span><< Prev</span></a><a class="next"><span>Next >></span></a></div><div id="intText">  <p>Big is no longer impregnable defensive reasoning, the doom loop and doom zoom exploiting the productive lifecycle. Benchmarking against industry leaders, an essential process, should be a top priority at all times motivating participants and capturing their expectations, exploitation of core competencies as an essential enabler. Quantitative analysis of all the key ratios has a vital role to play in this an important ingredient of business process reengineering to ensure that non-operating cash outflows are assessed. Defensive reasoning, the doom loop and doom zoom by adopting project appraisal through incremental cash flow analysis, building flexibility through spreading knowledge and self-organization.</p>  <p>Working through a top-down, bottom-up approach, motivating participants and capturing their expectations, organizations capable of double-loop learning. Big is no longer impregnable whether the organization's core competences are fully in line, given market realities combined with optimal use of human resources. The three cs - customers, competition and change - have created a new world for business an important ingredient of business process reengineering maximization of shareholder wealth through separation of ownership from management. Motivating participants and capturing their expectations, empowerment of all personnel, not just key operatives, to ensure that non-operating cash outflows are assessed.</p>  <p>In a collaborative, forward-thinking venture brought together through the merging of like minds. The three cs - customers, competition and change - have created a new world for business by adopting project appraisal through incremental cash flow analysis, defensive reasoning, the doom loop and doom zoom. Organizations capable of double-loop learning, that will indubitably lay the firm foundations for any leading company empowerment of all personnel, not just key operatives. The vitality of conceptual synergies is of supreme importance as knowledge is fragmented into specialities working through a top-down, bottom-up approach. An investment program where cash flows exactly match shareholders' preferred time patterns of consumption presentation of the process flow should culminate in idea generation, building a dynamic relationship between the main players.</p><a href="#" class="show_hide">x-close</a></div></div><!-- end class intWork --><div id="personal_kill"><img src="otherimages.jpg" />  <p>Working through a top-down, bottom-up approach, motivating participants and capturing their expectations, organizations capable of double-loop learning. Big is no longer impregnable whether the organization's core competences are fully in line, given market realities combined with optimal use of human resources. The three cs - customers, competition and change - have created a new world for business an important ingredient of business process reengineering maximization of shareholder wealth through separation of ownership from management. Motivating participants and capturing their expectations, empowerment of all personnel, not just key operatives, to ensure that non-operating cash outflows are assessed.</p></div></div><!--end work--></body></html>

[dmei4]

Thanks. I'll try to combine it with my code tomorrow and let you know how it goes. I played around with the options and so far so good. I was wondering if you forgot the option of the title having control over intWork when it's visible.Also, I'm curious as to what does this do exactly

  var thisstring = $("#intText p:first-child").html();	$("#text p:first-child").html(thisstring+'..<a href="java script:void(null)" class="show_hide">~more</a>');

Does this truncate the full text and how exactly does it work?

[dsonesuk]

you're having a laugh now, if you want a 4th option, everything is there to to work it out.

var thisstring = $("#intText p:first-child").html(); $("#text p:first-child").html(thisstring+'..<a href="java script:void(null)" class="show_hide">~more</a>');

(1) assigns first paragraph content using ,html() in intText div container to thisstring variable.(2) finds first paragraph of #text div container and insert variable value along with ".." and link to show and hide intWork and show sWork using .html(thisstring+'..<a href="java script:void(null)" class="show_hide">~more</a>');.

[dmei4]

Thanks so much.