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?