Click here to Skip to main content
15,867,991 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hi all, I'm new to both this forum, and jScripting, but am eager to learn and need some advice down below.

In my .html I want to run this jScript:

<script type="text/javascript">
jQuery(function(){
jQuery('#showall').click(function(){
jQuery('.target').show();
});

jQuery('.lista').click(function(){
	jQuery('.target').hide();
	jQuery('#div'+$(this).attr('target')).show();
});
});



In the same .html I have one container beeing:
div id="Contain"

with: (being column to the left)
<div class="sektioner">
<a id="showall">Alla</a>
<a class="lista" target="1">Delmoment 1</a>
<a class="lista" target="2">Delmoment 2</a>
<a class="lista" target="3">Delmoment 3</a>
<a class="lista" target="4">Delmoment 4</a>
<a class="lista" target="5">Delmoment 5</a>
</div>


and: (being column to the right)
<section class="columns">
<div id="col1" class="target">Delmoment 1<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Volutpat lacus laoreet non curabitur gravida arcu ac tortor.</p></div>
<div id="col2" class="target">Delmoment 2<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Volutpat lacus laoreet non curabitur gravida arcu ac tortor.</p></div>
<div id="col3" class="target">Delmoment 3<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Volutpat lacus laoreet non curabitur gravida arcu ac tortor.</p></div>
<div id="col4" class="target">Delmoment 4<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Volutpat lacus laoreet non curabitur gravida arcu ac tortor.</p></div>
<div id="col5" class="target">Delmoment 5<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Volutpat lacus laoreet non curabitur gravida arcu ac tortor.</p></div>

When I click
<a class="lista" target="1">

I want nothing but the corresponding column to show in the column to the right. But I only en up having the
<a id="showall">Alla</a>
working, which opens and closes all columns.

What I have tried:

I haven't figured out anything else to try, but my guess is that I need something else to identify the .target, but don't know exactly where to specify this? My guts is telling me that
jQuery('#div'+$(this).attr('target')).show();
where the .attr('target') is in need of a change?
Posted
Updated 15-Nov-20 21:18pm
Comments
[no name] 15-Nov-20 11:06am    
Instead of starting off with "I want to run this script", start by explaining what you want to accomplish and where you are having issues. Getting junk to run is still junk.
Member 14993304 16-Nov-20 14:49pm    
I'll keep that in mind next time I'm posting a question.

Richard Deeming came with and excellent solution tho, whereas one fault was found in the jQuery, and an explanation to it . I guess he read the whole post ;)

Cheers.

1 solution

Given this HTML element:
HTML
<a class="lista" target="1">
then this Javascript:
JavaScript
jQuery('#div'+$(this).attr('target'))
is looking for any element with the ID div1.

But your element doesn't have the ID div1; it has the ID col1:
HTML
<div id="col1" class="target">

Change your selector to match the ID of the element:
JavaScript
jQuery('#col'+$(this).attr('target'))
or change the ID of your target elements to match the selector:
HTML
<div id="div1" class="target">
 
Share this answer
 
Comments
Member 14993304 16-Nov-20 14:35pm    
That did it Richard Deeming, big thanks!

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS


CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900