Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Andreas Anastasiades
Andreas Anastasiades
2,916 Points
Posted by Andreas Anastasiades
Andreas Anastasiades
2,916 Points

Target WP post class and add active class

Hi I'm trying to create tabbed content (view WP topic here https://teamtreehouse.com/forum/custom-post-types-as-content-tabs )

Question is how I create a js to get it active, because now my page only displays my last item in list.

My list items have the id:

<li><a href="publisher-<?php the_ID(); ?>"><?php the_title(); ?></a></li>

My content div generates the same one:

 <div id="publisher-<?php the_ID(); ?>">
HERE CURRENTLY COMES THE CONTENT OF THE LAST ITEM IN LIST
</div>

Now I'm trying to create a script for content tabs that targets the variable publisher-### id but have no idea how to target something that gets created dynamically.

If anyone has an idea, all help is welcome

Thanks!

3 Answers

Colin Marshall
Colin Marshall
32,861 Points
Colin Marshall
Colin Marshall
32,861 Points

I noticed you are using jQuery on the site, so that's what I will use here for my answer. I would use the Attribute Contains Prefix Selector. 

$('[href|="publisher"]').click(function(event) {
    // Make it so clicking on the link not take you to a different page (default link action)
    event.preventDefault();
    // store the publisher for this link in a variable
    var publisherId = $(this).attr('href');
    // hide all other publishers div's that are showing
    $('[id|="publisher"]').hide();
    // show the div with an id that matches the href of the link that was clicked    
    $('#' + publisherId).show();              
});
Andreas Anastasiades
Andreas Anastasiades
2,916 Points
Andreas Anastasiades
Andreas Anastasiades
2,916 Points

Hi Colin,

Thanks for your answer. It seems to be almost what I'm looking for. Don't know what goes wrong, but it first shows the last post, when clicking another, it hides the content but doesn't pull up the post I clicked.

Could be an issue with my php?

Andreas Anastasiades
Andreas Anastasiades
2,916 Points
Andreas Anastasiades
Andreas Anastasiades
2,916 Points

*UPDATE

I adapted my php of the template and got it working, you my friend, are a genious! Only one thing left to fix; When I enter the page it starts of by showing all posts, then when clicking a title it does what it should. Is it possible to start off without showing any content, just a default message like 'click a publisher to find out more' ?

Thanks so much Colin!

Andreas Anastasiades
Andreas Anastasiades
2,916 Points
Andreas Anastasiades
Andreas Anastasiades
2,916 Points

Alright, consider this fixed I guess

I started the script with 

jQuery('[id|="publisher"]').hide();

So default nothing shows and then your awesome script starts working. I just have to create a default message then.

Thanks! Had been stuck on this for a week now!

Colin Marshall
Colin Marshall
32,861 Points
Colin Marshall
Colin Marshall
32,861 Points

No problem! Glad we got it working!

Instead of the script you added, I would put this in the CSS:

[id|="publisher"] {
  display: none;
}

Your script works fine (obviously), but the user might see all the publisher divs if they are on a slow connection while the page loads before it hits the script. If you have them all hidden in the CSS to start with, it will prevent that.

Andreas Anastasiades
Andreas Anastasiades
2,916 Points
Andreas Anastasiades
Andreas Anastasiades
2,916 Points

You're right again.

Thanks so much for the help! You saved me on this one