Trouble with show/hide JavaScript

Question

I am going to have an ExpressionEngine weblog that will place user designed content blocks in the footer. But, it's only going to show one at at time.

My HTML looks like this:

<ul class="footernav">
    <li class="first"><a class="active" href="#">Get in touch</a></li>
    <li><a href="#">Interested in joining?</a></li>
    <li><a href="#">Feedback</a></li>
    <li><a href="#">Link 4</a></li>
</ul>
<div class="copy gutters show">
    <p>Lorem Ipsum</p>
</div>
<div class="copy gutters hide">
    <p>Lorem Ipsum</p>
</div>
<div class="copy gutters hide">
    <p>Lorem Ipsum</p>
</div>

I want to switch the show class to a hide class depending on the clicked link. Not sure how I can accomplish this. It has to be flexible enough to work with N number of content blocks--because they will be defined by the user in ExpressionEngine.

I'm pretty much brand new to JavaScript so I would really appreciate any insight, or solution for how I might accomplish this.

Sampson · Accepted Answer · 2010-01-15 22:18:30Z

3

I think this would work with your structure:

// Cycle through each link in our ul.footernav element
$(".footernav a").each(function(i,o){
  // Attach click-logic to each link
  $(this).click(function(e){
    // Prevent page from bouncing, reloading, etc.
    e.preventDefault();
    // Add .active class to this, but remove from all other links
    $(this).addClass("active").closest("li").siblings("li").find("a").removeClass("active");
    // Show any DIV having class .copy and same index as clicked link
    // meaning, clicking the second link will show the second div
    $("div.copy:eq("+i+")").show().siblings("div.copy").hide();
  });
});

Demo Online: http://jsbin.com/ekecu

edited Jan 15, 2010 at 22:18

answered Jan 15, 2010 at 19:03

Sampson

269k76 gold badges546 silver badges570 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Fuego DeBassi Over a year ago

Thanks for the help! This doesn't work just yet, but I'm starting to see it. Doesn't there need to be some sort of specific identifier to tell it which link should show which content block? Any solution for how I might do that?

Sampson Over a year ago

unknown, the "identifier" is the order in which the links appear. The first link will toggle the first div. The second link will toggle the second div, etc. This works - check the "Demo Online" at the bottom of the solution.

Fuego DeBassi Over a year ago

Hmm. Quite right it does seem to work exactly as needed on your JsBin example. However the exact snippet your using successfully there, works oddly when I implement (it's a local EE install, or I would link it). It seems to only work on the last link in the list. In the case of our example, Link 4. Once the last link has been activated the one immediately preceding it activates the first content block. Any thoughts?

Sampson Over a year ago

Banderdash, you don't have any other div.copy elements, do you? I'm assuming your HTML example here accurately represents the one you have on your machine.

Fuego DeBassi Over a year ago

Nevermind. I forgot I was using the div.copy on other areas of the page as well, was reaking havoc. Thank you very much Jonathan. Only other question is the active class on the <a>...doesn't switch with the clicks.. Any thoughts?

|

Collectives™ on Stack Overflow

Trouble with show/hide JavaScript

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related