Link anchors with divs

[sebh1]

Hi,

I've got what I think is probably a simple jquery question.  I have a series of anchors, and a series of divs later in the HTML.  I want to bind the show event to a div when the corresponding anchor is clicked.  I have applied a class to all anchors and all divs, but what is the best way to relate the 1st anchor to the 1st div etc

Many thanks!

[Syamsundar]

I don't think we have a direct way of pulling the index of an element. But you can try this:

$(function(){
    var as = $("a");
    for(var x in as){
        as[x].click(function(){
            $("div:eq(" + x + ")").show();
        });
    }
});

Hope that helps!
-Syam

sebh1 wrote:

Hi,

I've got what I think is probably a simple jquery question.  I have a series of anchors, and a series of divs later in the HTML.  I want to bind the show event to a div when the corresponding anchor is clicked.  I have applied a class to all anchors and all divs, but what is the best way to relate the 1st anchor to the 1st div etc

Many thanks!

[Ariel Flesler]

@Syamsundar
That won't work. x will keep the last index, you need to use each
instead.

@sebh1
I think you confuse anchors with hyperlinks. Anchors are <a
name="foo">, links: <a href="foo">.
http://en.wikipedia.org/wiki/HTML_element#Links_and_anchors

$('a.magic').click(function(e){
  e.preventDefault();
  $(this.hash).show();
});

Cheers

--
Ariel Flesler
http://flesler.blogspot.com/

On 23 jul, 16:53, sebh1 <s.hard...@...> wrote:

> Hi,
>
> I've got what I think is probably a simple jquery question.  I have a series
> of anchors, and a series of divs later in the HTML.  I want to bind the show
> event to a div when the corresponding anchor is clicked.  I have applied a
> class to all anchors and all divs, but what is the best way to relate the
> 1st anchor to the 1st div etc
>
> Many thanks!
> --
> View this message in context:http://www.nabble.com/Link-anchors-with-divs-tp18618511s27240p1861851...
> Sent from the jQuery General Discussion mailing list archive at Nabble.com.

[sebh1]

Hi,

thanks for the answer, but I'm not sure why or how your solution would work.  You're right I meant link not anchor!  

Just to clarify what I'm trying to do:

Link 1
Link 2
Link 3

<div class="showHideDiv">Text 1</div>
<div class="showHideDiv">Text 2</div>
<div class="showHideDiv">Text 3</div>

When I click Link 1, I want to show/hide Text 1.  I have a page with many of these, so I do not want to manually assign id's - can I do this programatically.  My ideas so far were something like (I know this doesn't work):
 
        $(".hyperlink").each(function(index) {
                        $(".showHideDiv").bind('click', function() {
                                        $(".answer").toggle('slow');
                        });
        });


So I need to reference the first showHideDiv in the array - any ideas?

Cheers

Ariel Flesler wrote:

@Syamsundar
That won't work. x will keep the last index, you need to use each
instead.

@sebh1
I think you confuse anchors with hyperlinks. Anchors are , links: .
http://en.wikipedia.org/wiki/HTML_element#Links_and_anchors

$('a.magic').click(function(e){
  e.preventDefault();
  $(this.hash).show();
});

Cheers

--
Ariel Flesler
http://flesler.blogspot.com/

On 23 jul, 16:53, sebh1 <[e-mail]> wrote:
> Hi,
>
> I've got what I think is probably a simple jquery question.  I have a series
> of anchors, and a series of divs later in the HTML.  I want to bind the show
> event to a div when the corresponding anchor is clicked.  I have applied a
> class to all anchors and all divs, but what is the best way to relate the
> 1st anchor to the 1st div etc
>
> Many thanks!
> --
> View this message in context:http://www.nabble.com/Link-anchors-with-divs-tp18618511s27240p1861851...
> Sent from the jQuery General Discussion mailing list archive at Nabble.com.

[Karl Swedberg-2]

Looks to me like Syam's solution would work. But if you want to use .each(), you could do it this way:

$(document).ready(function() {

  $('a.hyperlink').each(function(index) {

    $(this).click(function() {

      $('div.showHideDiv:eq(' + index + ')').toggle('slow');

      return false;

    });

  });

});

Note the return false in there. you'll need that to avoid having the link take you to the href.

Hope that helps.

--Karl
____________

Karl Swedberg

www.englishrules.com

www.learningjquery.com

On Jul 24, 2008, at 5:13 AM, sebh1 wrote:

Hi,

thanks for the answer, but I'm not sure why or how your solution would work.
You're right I meant link not anchor!  

Just to clarify what I'm trying to do:

# Link 1
# Link 2
# Link 3

<div class="showHideDiv">Text 1</div>
<div class="showHideDiv">Text 2</div>
<div class="showHideDiv">Text 3</div>

When I click Link 1, I want to show/hide Text 1.  I have a page with many of
these, so I do not want to manually assign id's - can I do this
programatically.  My ideas so far were something like (I know this doesn't
work):

$(".hyperlink").each(function(index) {
$(".showHideDiv").bind('click', function() {
$(".answer").toggle('slow');
});
});


So I need to reference the first showHideDiv in the array - any ideas?

Cheers


Ariel Flesler wrote:

@Syamsundar

That won't work. x will keep the last index, you need to use each

instead.

@sebh1

I think you confuse anchors with hyperlinks. Anchors are  , links:  foo .

http://en.wikipedia.org/wiki/HTML_element#Links_and_anchors

$('a.magic').click(function(e){

 e.preventDefault();

 $(this.hash).show();

});

Cheers

--

Ariel Flesler

http://flesler.blogspot.com/

On 23 jul, 16:53, sebh1 <s.hard...@...> wrote:

Hi,

I've got what I think is probably a simple jquery question.  I have a

series

of anchors, and a series of divs later in the HTML.  I want to bind the

show

event to a div when the corresponding anchor is clicked.  I have applied

a

class to all anchors and all divs, but what is the best way to relate the

1st anchor to the 1st div etc

Many thanks!

--

View this message in

context:http://www.nabble.com/Link-anchors-with-divs-tp18618511s27240p1861851...

Sent from the jQuery General Discussion mailing list archive at

Nabble.com.

--
View this message in context: http://www.nabble.com/Link-anchors-with-divs-tp18618511s27240p18628102.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.

[sebh1]

works a treat!  thank you

Karl Swedberg-2 wrote:

Looks to me like Syam's solution would work. But if you want to  
use .each(), you could do it this way:

$(document).ready(function() {
   $('a.hyperlink').each(function(index) {
     $(this).click(function() {
       $('div.showHideDiv:eq(' + index + ')').toggle('slow');
       return false;
     });
   });
});

Note the return false in there. you'll need that to avoid having the  
link take you to the href.

Hope that helps.

--Karl
____________
Karl Swedberg
www.englishrules.com
www.learningjquery.com




On Jul 24, 2008, at 5:13 AM, sebh1 wrote:

>
>
> Hi,
>
> thanks for the answer, but I'm not sure why or how your solution  
> would work.
> You're right I meant link not anchor!
>
> Just to clarify what I'm trying to do:
>
> # Link 1
> # Link 2
> # Link 3
>
> <div class="showHideDiv">Text 1</div>
> <div class="showHideDiv">Text 2</div>
> <div class="showHideDiv">Text 3</div>
>
> When I click Link 1, I want to show/hide Text 1.  I have a page with  
> many of
> these, so I do not want to manually assign id's - can I do this
> programatically.  My ideas so far were something like (I know this  
> doesn't
> work):
>
> $(".hyperlink").each(function(index) {
> $(".showHideDiv").bind('click', function() {
> $(".answer").toggle('slow');
> });
> });
>
>
> So I need to reference the first showHideDiv in the array - any ideas?
>
> Cheers
>
>
> Ariel Flesler wrote:
>>
>>
>> @Syamsundar
>> That won't work. x will keep the last index, you need to use each
>> instead.
>>
>> @sebh1
>> I think you confuse anchors with hyperlinks. Anchors are  , links:  
>> foo .
>> http://en.wikipedia.org/wiki/HTML_element#Links_and_anchors
>>
>> $('a.magic').click(function(e){
>>  e.preventDefault();
>>  $(this.hash).show();
>> });
>>
>> Cheers
>>
>> --
>> Ariel Flesler
>> http://flesler.blogspot.com/
>>
>> On 23 jul, 16:53, sebh1 <[e-mail]> wrote:
>>> Hi,
>>>
>>> I've got what I think is probably a simple jquery question.  I  
>>> have a
>>> series
>>> of anchors, and a series of divs later in the HTML.  I want to  
>>> bind the
>>> show
>>> event to a div when the corresponding anchor is clicked.  I have  
>>> applied
>>> a
>>> class to all anchors and all divs, but what is the best way to  
>>> relate the
>>> 1st anchor to the 1st div etc
>>>
>>> Many thanks!
>>> --
>>> View this message in
>>> context:http://www.nabble.com/Link-anchors-with-divs-tp18618511s27240p1861851 
>>> ...
>>> Sent from the jQuery General Discussion mailing list archive at
>>> Nabble.com.
>>
>>
>
> --
> View this message in context: http://www.nabble.com/Link-anchors-with-divs-tp18618511s27240p18628102.html
> Sent from the jQuery General Discussion mailing list archive at  
> Nabble.com.
>