JQuery show multi DIV

[hutton]

Salve a tutti, ho un problema con uno script jquery.
Partendo da una serie di link, vorrei che al click di uno dei link si aprisse un contenitore generale che include una serie di elementi di vari lavori, ma che al suo interno fosse visualizzato uno solo di questi elementi ben specifico...

Il mio script funziona solo per una parte... se faccio click su uno dei link (#thumbSkybox or #thumbExample) viene visualizzato il contenitore principale (#workExtend) ma purtroppo anche "tutti" gli elementi al suo interno ('#workSkybox' e '#workWebsite') e non uno in particolare a seconda del link su cui ho cliccato.

Qui di seguito c'è il javascript

    $(document).ready(function ()
    {
        //Hide (Collapse) the toggle containers on load
        $("#workExtend").hide();
    
        $(".thumbBox").click(function ()
        {
            $("#workExtend").slideToggle("slow");
            ('#workSkybox')[ ($(this).id() == 'thumbSkybox') ? 'hide' : 'show' ]();
            ('#workWebsite')[ ($(this).id() == 'thumbExample') ? 'hide' : 'show' ]();
            return false;
        });
        $("#close-project a").click(function()
        {
            $("#workExtend").hide("slow");
        });
    });

Mentre questo è l'html

    
    <div id="workExtend">
        <div id="workHeader">
            <p id="close-project">
                Close Project</p>
        </div>
        <div id="workContainer">
            <div id="workSkybox">
                Work PROJECT 1
            </div>
            <div id="workWebsite">
                Work PROJECT 2
            </div>
        </div>
    </div>



    <div id="thumbSkybox" class="thumbBox">
        [img]images/project1.jpg[/img]
    </div>
    <div id="thumbExample" class="thumbBox">
        [img]images/project2.jpg[/img]
    </div>

[hutton]

Nessuno mi può aiutare ?

[Vindav]

$(this).id() non è una funzione, riguardati queste 2 righe di codice:

('#workSkybox')[ ($(this).id() == 'thumbSkybox') ? 'hide' : 'show' ]();
('#workWebsite')[ ($(this).id() == 'thumbExample') ? 'hide' : 'show' ]();

[hutton]

Ci sto ammattendo....
come faccio a dirgli se ha questo id "#thumbSkybox" apri sia "#workExtend" sia "#workSkybox", mentre se ha id "#thumbExample" apri "#workExtend" e "workWebsite" ?

Ovviamente per adesso i link sono 2 .... in futuro aumenteranno, per cui ho bisogno di una funzione modulabile...

[Vindav]

prova cosi:

if($(this).attr("id") == 'thumbSkybox') $('#workWebsite').hide();
if($(this).attr("id") == 'thumbExample') $('#workSkybox').hide();

per renderlo modulabile devi avere un oggetto che associ il link cliccato con i div da far comparire/nascondere. Oppure devi associare l'id del link cliccato con gli id dei div da far comparire/nascondere.

[hutton]

Ho provato lo script.... ma non va bene.
La prima volta fa l'animazione ma apre il div contrario, mentre ai seguenti click non vengono più visualizzati gli elementi #workSkybox e #workWebsite.

La mia idea era di fare una cosa simile a questo : http://www.8020studio.com/
ma assai più semplificata...

[hutton]

Allora, ho fatto un po di prove ed ho modificato così

$(document).ready(function ()
{
    //Hide (Collapse) the toggle containers on load
    $("#workExtend").hide();

	$(".thumbContainer>a").click(function ()
	{
		$("#workExtend").show("slow");
		//$("#workContainer>div").filter(this.hash).slideToggle("slow");
		/*if($(this).attr("id") == 'thumbSkybox') $('#workSkybox').hide();
		if($(this).attr("id") == 'thumbExample') $('#workWebsite').hide();*/
		$("#workContainer>div").filter(this.hash).slideToggle("slow");
		return false;
	});
	$("#close-project a").click(function()
	{
		$("#workExtend").hide("slow");
	});
});

		<div id="workExtend">
            <div id="workHeader">
                <p id="close-project">
					Close Project</p>
            </div>
            <div id="workContainer">
                <div id="workSkybox" class="workDisplay" style="color : white;">
                    Work Skybox
                </div>
                <div id="workWebsite" class="workDisplay" style="color : white;">
                    Work Website
                </div>
            </div>
        </div>
		
        <div id="gallery">
            <div id="thumbSkybox" class="thumbBox">
				<div id="thumb_01" class="thumbContainer">
					<a href="#workSkybox" title="">
                        [img]thumbs/skybox/skybox-01.jpg[/img]</a>
					<div class="thumbOverlay"></div>
					<div class="thumbCaption">
						<p class="thumbCategory">Category</p>
						<h3>Amazing Image Title</h3>
						<p class="thumbText">
						   Lorem ipsum dolor sit amet, consectetur adipisicing elit,
							sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
						</p>
					</div>
				</div>
			</div>
			<div id="thumbExample" class="thumbBox">
				<div id="thumb_02" class="thumbContainer">
                    <a href="#workWebsite" title="">
                        [img]thumbs/webdesign/portfolio-01.jpg[/img]</a>
					<div class="thumbOverlay"></div>
					<div class="thumbCaption">
						<p class="thumbCategory">Category</p>
						<h3>Amazing Image Title</h3>
						<p class="thumbText">
						   Lorem ipsum dolor sit amet, consectetur adipisicing elit,
							sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
						</p>
					</div>
				</div>
			</div>
			<div class="clear"></div>
        </div>

però la prima volta apre il link contrario a quello cliccato...

[Vindav]

$(this).attr("id") == 'thumbSkybox' ? $('#workSkybox').hide() :  $('#workSkybox').show();
$(this).attr("id") == 'thumbExample' ? $('#workWebsite').hide() : $('#workWebsite').show();

Se sono al contrario invertili..

[hutton]

Allora, ho fatto un po di prove ed ho modificato così

$(document).ready(function ()
{
    //Hide (Collapse) the toggle containers on load
    $("#workExtend").hide();

	$(".thumbContainer>a").click(function ()
	{
		$("#workExtend").show("slow");
		//$("#workContainer>div").filter(this.hash).slideToggle("slow");
		/*if($(this).attr("id") == 'thumbSkybox') $('#workSkybox').hide();
		if($(this).attr("id") == 'thumbExample') $('#workWebsite').hide();*/
		$("#workContainer>div").filter(this.hash).slideToggle("slow");
		return false;
	});
	$("#close-project a").click(function()
	{
		$("#workExtend").hide("slow");
	});
});

		<div id="workExtend">
            <div id="workHeader">
                <p id="close-project">
					Close Project</p>
            </div>
            <div id="workContainer">
                <div id="workSkybox" class="workDisplay" style="color : white;">
                    Work Skybox
                </div>
                <div id="workWebsite" class="workDisplay" style="color : white;">
                    Work Website
                </div>
            </div>
        </div>
		
        <div id="gallery">
            <div id="thumbSkybox" class="thumbBox">
				<div id="thumb_01" class="thumbContainer">
					<a href="#workSkybox" title="">
                        [img]thumbs/skybox/skybox-01.jpg[/img]</a>
					<div class="thumbOverlay"></div>
					<div class="thumbCaption">
						<p class="thumbCategory">Category</p>
						<h3>Amazing Image Title</h3>
						<p class="thumbText">
						   Lorem ipsum dolor sit amet, consectetur adipisicing elit,
							sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
						</p>
					</div>
				</div>
			</div>
			<div id="thumbExample" class="thumbBox">
				<div id="thumb_02" class="thumbContainer">
                    <a href="#workWebsite" title="">
                        [img]thumbs/webdesign/portfolio-01.jpg[/img]</a>
					<div class="thumbOverlay"></div>
					<div class="thumbCaption">
						<p class="thumbCategory">Category</p>
						<h3>Amazing Image Title</h3>
						<p class="thumbText">
						   Lorem ipsum dolor sit amet, consectetur adipisicing elit,
							sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
						</p>
					</div>
				</div>
			</div>
			<div class="clear"></div>
        </div>

però la prima volta apre il link contrario a quello cliccato...

[Vindav]

$(document).ready(function ()
		{
		    //Hide (Collapse) the toggle containers on load
		    $("#workExtend").hide();
		    

			$(".thumbContainer>a").click(function ()
			{
				$("#workContainer>div").hide();
				$("#workExtend").show("slow");
				$("#workContainer>div").filter(this.hash).slideToggle("slow");
				
			});
			$("#close-project a").click(function()
			{
				$("#workExtend").hide("slow");
			});
		});