CODEWITHSUNDEEP
jquery
JVG
JVG

Reputation: 21150

Dynamically show/hide divs with jQuery

I currently have jquery Cycle running on a page, but not only find it bulky but it's messing with the rest of my page. I'm writing a simple script to make it obsolete for my purposes, which will take the href of a menu item that is clicked, show the div that pertains to it, while hiding all others.

jsFiddle: http://jsfiddle.net/THuST/

HTML (Ignore the fact that I've used <ul> for just one <li> element - there are heaps more that will go in there but for simplicity I've omitted them)

<div id="adSlideshow">
    <div class="adSlideBox current" id="red">
        <ul class="gallery" id="redGallery">
            <li><img src="http://i.imgur.com/LMHtk.png" alt="Asics Folio Slide 1" title=""/></li>
        </ul>
    </div>
    <div class="adSlideBox" id="yellow">
        <ul class="gallery" id="yellowGallery">
            <li><img src="http://i.imgur.com/X25M3.png" alt="Plants Plus Folio Slide 1" title=""/></li>
        </ul>
    </div>
    <div class="adSlideBox" id="blue">
        <ul class="gallery" id="blueGallery">
            <li><img src="http://i.imgur.com/WyDQI.png" alt="" title=""/></li>
        </ul>
    </div>
</div>
<ul id="menu" style="list-style:none">
    <li><a href="#asics">RED</a></li>
    <span>\</span>
    <li><a href="#plants">YELLOW</a></li>
    <span>\</span>
    <li><a href="#tooheys">BLUE</a></li>
</ul>

CSS

.adSlideBox {display:none;}
.adSlideBox.current {display:block;}

img {max-width:350px; max-height:350px}

#menu li {float:left; margin-left:2em}

jQuery

$("#menu a").click(function() {
        var link = $(this).attr('href');
        var showIt = $(".adslidebox a[href=" + link + "]");
        var hideIt = $(".adSlideBox.current");

        hideIt.fadeOut(100, function(){
            hideIt.removeClass("current");
            showIt.addClass("current");
            showIt.fadeIn(100);
        });
    });

This is my first try at making a script from scratch, so please bear with me. I think I'm relatively close; the .current div fades out successfully, however the selected div doesn't fade in, and the .current class isn't toggled.

Upvotes: 1

Views: 6802

Answers (3)

Bon Espresso
Bon Espresso

Reputation: 693

You have no link inside .adslidebox, it's under #menu element

UPDATE: HTML:

<div id="adSlideshow">
    <div class="adSlideBox current" id="asics">
        <ul class="gallery" id="redGallery">
            <li><img src="http://i.imgur.com/LMHtk.png" alt="Asics Folio Slide 1" title=""/></li>
        </ul>
    </div>
    <div class="adSlideBox" id="plants">
        <ul class="gallery" id="yellowGallery">
            <li><img src="http://i.imgur.com/X25M3.png" alt="Plants Plus Folio Slide 1" title=""/></li>
        </ul>
    </div>
    <div class="adSlideBox" id="tooheys">
        <ul class="gallery" id="blueGallery">
            <li><img src="http://i.imgur.com/WyDQI.png" alt="" title=""/></li>
        </ul>
    </div>
</div>
<ul id="menu" style="list-style:none">
    <li><a href="#asics">RED</a> <span>\</span></li>
    <li><a href="#plants">YELLOW</a> <span>\</span></li>
    <li><a href="#tooheys">BLUE</a></li>
</ul>

JS:

$("#menu a").click(function() {
        var link = $(this).attr('href');
        var showIt = $(".adSlideBox" + link);
        var hideIt = $(".adSlideBox.current");

        hideIt.fadeOut(100, function(){
            hideIt.removeClass("current");
            showIt.addClass("current");
            showIt.fadeIn(100);
        });
    });

Upvotes: 1

redmoon7777
redmoon7777

Reputation: 4526

here you go : http://jsfiddle.net/THuST/6/

Upvotes: 1

Brandon J. Boone
Brandon J. Boone

Reputation: 16472

Just a slight change to your html and javascript should solve the problem.

http://jsfiddle.net/THuST/3/

Basically, I made the ID's of your divs match your href values. This way you just need to pull out the href value from your links and pass it into jQuery as a valid selector.

JavaScript

$("#menu a").click(function() {
        var link = $(this).attr('href');
        var showIt = $(link);
        var hideIt = $(".adSlideBox.current");

        hideIt.fadeOut(100, function(){
            hideIt.removeClass("current");
            showIt.addClass("current");
            showIt.fadeIn(100);
        });
    });

HTML

           <div id="adSlideshow"><!-- DIV FOR THE AD BLOCK -->

                <div class="adSlideBox current" id="asics">
                    <ul class="gallery" id="redGallery">
                         <li><img src="http://i.imgur.com/LMHtk.png" alt="Asics Folio Slide 1" title=""/></li>
                    </ul>
                </div>
                <div class="adSlideBox" id="plants">
                            <ul class="gallery" id="yellowGallery">
                                <li><img src="http://i.imgur.com/X25M3.png" alt="Plants Plus Folio Slide 1" title=""/></li>
                            </ul>

                </div>
                <div class="adSlideBox" id="tooheys">

                            <ul class="gallery" id="blueGallery">
                                <li><img src="http://i.imgur.com/WyDQI.png" alt="" title=""/></li>

                            </ul>


                </div>
            </div>


<ul id="menu" style="list-style:none">

    <li><a href="#asics">RED</a></li>
    <span>\</span>
    <li><a href="#plants">YELLOW</a></li>
    <span>\</span>
    <li><a href="#tooheys">BLUE</a></li>
</ul>

Upvotes: 1

Related Questions