CODEWITHSUNDEEP
javascriptjqueryhtml
Keith Drake Waggoner
Keith Drake Waggoner

Reputation: 783

JQuery displaying only certain id Div

I have a jquery function which displays a div, when an anchor tag with the id toggle_(some unique number) is clicked.

    $("a[id ^= 'toggle']").click(function(event){
        event.preventDefault();
        $("div [id ^= 'replypost']").toggle();
    });

  1. Each of the ids toggle and"replypost end with `_(unique number) for each id so I can separate all of the toggle and replypost divs.

  2. The toggle and reply post divs are displayed through a while() loop.So there are multipe Toggle and replypost divs but each of them have a unique number.

  3. So there is a toggle_1 and a ReplyPost_1 .

I need a way to display only ReplyPost_1 when Toggle_1 is clicked and only ReplyPost_2 when Toggle_2 is clicked, is this possible? If you need me to clear anything up just let me know and thanks for your time.

Upvotes: 0

Views: 160

Answers (4)

Aesthete
Aesthete

Reputation: 18848

You could use classes to make this alot cleaner, and eliminate the loops.

<a id="toggle_1" class="toggle" />
<div id="replyPost_1" class="reply-post" />

Now you can just listen to a click event on all toggle anchors, get the number from the id, hide all reply divs and show only the matching reply post.

$(".toggle").click(function(e) {
  var num = $(this).attr("id").split("_")[1];
  $(".reply-post").hide();
  $("replyPost_"+num).show();
});

Upvotes: 1

Billy Moon
Billy Moon

Reputation: 58531

$("a[id^='toggle']").click(function(event){
  event.preventDefault();
  // grab the index of the clicked element from it's ID
  var index = $(this).attr('id').match(/\d+$/)[0]
  // identify the thing to toggle uniquely, based on the grabbed index
  $("div#replypost_"+index).toggle();
});

Upvotes: 1

haitaka
haitaka

Reputation: 1856

I think this should do the trick:

$("a[id ^= 'toggle']").click(function(event){
    event.preventDefault();
    $("div [id='replypost_"+$(this).attr('id').replace('toggle_','')+"']").show();
});

Upvotes: 1

Popnoodles
Popnoodles

Reputation: 28409

To display only the post with a matching numeric and hide the others.

$("a[id^='toggle']").click(function(event){
    event.preventDefault();
    $("[id^='replypost']").hide();
    $("#replypost_" + this.id.replace('toggle_', '') ).show();
});

But if the posts are siblings this is less to write:

$("a[id^='toggle']").click(function(event){
    event.preventDefault();
    $("#replypost_" + this.id.replace('toggle_', '') ).show().siblings().hide();
});

Upvotes: 1

Related Questions