Need Jquery HELP!

Question

I am trying to traverse from an ID to another and do not seem to be working.

Problem: I would like to use a prev and next function to jump from one div to another. Kind of like a slider. However, there are other divs in between the elements that need to transition. I am using bootstrap (just wanted to mention that).

The boxes that need to transition have an ID of box.

$("#boxes #box").each(function(e) {
        if (e != 0)
            $(this).hide();
    });

    $("#next").click(function(){
        if ($("#boxes #box:visible").next().length != 0)
            $("#boxes #box:visible").next().show().prev().hide();
        else {
            $("#boxes #box:visible").hide();
            $("#boxes #box:first").show();
        }
        return false;
    });

    $("#previous").click(function(){
        if ($("#boxes #box:visible").prev().length != 0)
            $("#boxes #box:visible").prev().show().next().hide();
        else {
            $("#boxes #box:visible").hide();
            $("#boxes #box:last").show();
        }
        return false;
    });

HTML CODE----------------------------------

<div align="container-fluid">
    <div class="row">
    <div id="boxes">
        <div class="col-lg-12">
        <div id="box" class="box-1">
            <div class="col-lg-6">
            <p><img src="images/group-lps.png"></p>
            </div>
            <div class="col-lg-6">
            <p>

Liquid Protein Supplement Critical Care®

Is a concentrated protein, made from naturally pre-digested Collagen and whey, for those unable to meet their protein needs through a normal diet.

Liquid Protein Supplement Critical Care®

Eliminates the need for additional supplements. L-arginine promotes collagen synthesis and increased blood flow to wounds. Zinc and Copper are co-factors for connective tissue production. Vitamin C is used for collagen synthesis and helps reduce free radical production.

Active Ingredients:

Collagen (Kosher), Glycerin, L-arginine, Whey Hydrolysates, Zinc Gluconate, Copper Gluconate.

Inactive Ingredients:

Deionized Water, Citric Acid, Disodium EDTA,
Benzyl Alcohol, Vanilla Liquid,
Ascorbic Acid, Sodium Benzoate, Maple Flavor,
Sucralose.
            </p>
            <table>
                <th>Nutrition Facts</th>
                <tr>
                    <td>Serving Size: 30ml (2tbsp)</td>
                </tr>
                <tr>
                    <td>Serving per container:</td>
                    <td>32 Amount per serving</td>
                </tr>

            </table>
            </div>
        </div>
        </div>
        <div id="box" class="box-2"></div>
        <div id="box" class="box-3"></div>
        </div>
       </div>
 </div>
<a id="previous" class="btn btn-primary" href="#">View Previous LPS</</a>  <a id="next" class="btn btn-primary" href="#">View Next LPS</a>
</div>

Answer 1 · 2015-03-06T06:09:03Z

March 6, 2015 6:09am

So the first thing I see wrong here is that you are using the id 'box' more than once. id's are supposed to only appear once per page. If you are using one identifier for multiple elements, that is an indicator that you should use a class.

The JS Should look something more like this:

    $("#boxes .box").each(function(e) {
        if (e != 0)
            $(this).hide();
    });

    $("#next").click(function(){
        if ($("#boxes .box:visible").next().length != 0)
            $("#boxes .box:visible").next().show().prev().hide();
        else {
            $("#boxes .box:visible").hide();
            $("#boxes .box:first").show();
        }
        return false;
    });

    $("#previous").click(function(){
        if ($("#boxes .box:visible").prev().length != 0)
            $("#boxes .box:visible").prev().show().next().hide();
        else {
            $("#boxes .box:visible").hide();
            $("#boxes .box:last").show();
        }
        return false;
    });

HTML should look more like:

<div align="container-fluid">
    <div class="row">
    <div id="boxes">
        <div class="col-lg-12">
        <div class="box">
            <div class="col-lg-6">
            <p><img src="images/group-lps.png"></p>
            </div>
            <div class="col-lg-6">
            <p>

Liquid Protein Supplement Critical Care®

Is a concentrated protein, made from naturally pre-digested Collagen and whey, for those unable to meet their protein needs through a normal diet.

Liquid Protein Supplement Critical Care®

Eliminates the need for additional supplements. L-arginine promotes collagen synthesis and increased blood flow to wounds. Zinc and Copper are co-factors for connective tissue production. Vitamin C is used for collagen synthesis and helps reduce free radical production.

Active Ingredients:

Collagen (Kosher), Glycerin, L-arginine, Whey Hydrolysates, Zinc Gluconate, Copper Gluconate.

Inactive Ingredients:

Deionized Water, Citric Acid, Disodium EDTA,
Benzyl Alcohol, Vanilla Liquid,
Ascorbic Acid, Sodium Benzoate, Maple Flavor,
Sucralose.
            </p>
            <table>
                <th>Nutrition Facts</th>
                <tr>
                    <td>Serving Size: 30ml (2tbsp)</td>
                </tr>
                <tr>
                    <td>Serving per container:</td>
                    <td>32 Amount per serving</td>
                </tr>

            </table>
            </div>
        </div>
        </div>
        <div class="box"></div>
        <div  class="box"></div>
        </div>
       </div>
 </div>
<a id="previous" class="btn btn-primary" href="#">View Previous LPS</</a>  <a id="next" class="btn btn-primary" href="#">View Next LPS</a>
</div>

I can't be sure this will solve your particular issue because there might be other problems, however avoiding multiple ID's with the same value is important.

Welcome to the Treehouse Community

Looking to learn something new?

Julio Mayorga

Julio Mayorga

Need Jquery HELP!

1 Answer

Riley Hilliard

Riley Hilliard