Repeated code doesn’t work

[Joseph Markus]

Here is the link: http://www.dcgbni.co.uk/other/ukccf/shortlist/technologies/customer_analytics/

There is ‘Hilton’ profile and ‘BBC’ profile. Click on ‘More information’ on both. ‘Hilton’ has video and information in tabs that displays correctly. ‘BBC’ videos appear incorrectly + ‘Overview’ tab does not appear as ‘open’ – the open tab should have a border around, just like on ‘Hilton’ one.

Any help would be appreciated. Thanks.

[sharikul]

Whaaat?

[Joseph Markus]

Ok. See ‘Hilton’ logo, underneath it says ‘More information’, click on that. Video appears in a nice horizontal bar.
Now, if you look down on ‘BBC’ logo, underneath click on ‘More information’, video appears as a mess.

When you click on ‘More information’, the title called ‘Overview’ should have a border around it, just like it is under ‘Hilton’. If you click on ‘More information’ under ‘BBC’ logo, the ‘Overview’ title doesn’t have that.

[CrocoDillon]

You have both containers with the same id `ca-container`, but id has to be unique. That’s probably part of the problem since the jQuery plugin is only applying styles to the first one.

[Joseph Markus]

Thanks CrocoDillon, it seems that videos appear fine now.

I suppose, there is a similar issue with tabs, because ‘current tab’ appears styled differently just in the first block (‘Hilton’) but none of the others, unless you click on one of them, although ‘Overview’ is open by default.

If id is the issue here, maybe I can adjust something in the jQuery?

[CrocoDillon]

Try this, remove `.filter(‘:first’).click()` and add `$(‘div.tabs ul.tabNavigation li:first-child a’).click();` after the `;` on a new line.

[Joseph Markus]

CrocoDillon, I followed the advice, but it seems that the issue still occurs. When you trigger ‘More information…’ to open the block, ‘Overview’ is open by default, but that does not appear with ‘selected’ CSS (blue text and blue underline), unless you click on it again.

[CrocoDillon]

Try

$(‘.tabNavigation li:first-child a’).addClass(‘selected’);

this will work. The problem is when you click an item, all others get deselected by `$(‘div.tabs ul.tabNavigation a’).removeClass(‘selected’);`, even those of other navigations. Change that line to

$(this).parents(‘.tabNavigation’).find(‘a’).removeClass(‘selected’);

[Joseph Markus]

If I keep both:

$(‘div.tabs ul.tabNavigation li:first-child a’).click();
$(‘.tabNavigation li:first-child a’).addClass(‘selected’);

Then ‘selected’ class is added only to the first block.

If I remove:

$(‘div.tabs ul.tabNavigation li:first-child a’).click();

Then in all blocks (apart from the first) information does not appear unless the tab (‘Overview’ for example) is triggered.

Do you reckon, it’s something do to with IDs in HTML?

• Overview
• Solutions
• Downloads
• Awards

OVERVIEW

SOLUTIONS

…

[CrocoDillon]

There are more errors in your code, opening the second tab in one, opens the second tab in the other too. I fixed that and cleaned up the code for you:

$(‘.tabNavigation a’).click(function() {
$this = $(this);
$tabs = $this.parents(‘.tabs’);

$tabs.find(‘.tabNavigation a’).removeClass(‘selected’);
$tabs.children(‘div’).hide();

$this.addClass(‘selected’);
$tabs.children(‘div’).filter(this.hash).show();

return false;
});

$(‘.tabNavigation li:first-child a’).click();

[CrocoDillon]

Having the same id on the same page multiple times is bad but not part of the problem here since it did work when I tested in CodePen.

EDIT: I think changing the show line to `$tabs.children(this.hash).show();` works too, but closed the CodePen so can’t test.

[Joseph Markus]

CrocoDillon, you’re a star! Thanks. It seems to be working now fine.
I’ve got just basic photoshop and html skills building all this website, so I find your advice very helpful. Thanks!

[Author]

Posts