I'm trying to toggle the visibility of this. You'll notice there's a primary key number at the end of the id:

<div id="campaign-details-container-12">

And this is how I've tried to select it:

$(document).on("click",".show-details",function () {
    $(this).blur();
    var id = $(this).data("id");
    var selector = "#campaign-details-container-"+id;
    alert(selector);

    $(selector).toggle();
    return false;
});

How can I get this to work? I could put a data-id="12" tag in the div instead and use a class, but how would I select by that?

I'm trying to toggle the visibility of this. You'll notice there's a primary key number at the end of the id:

<div id="campaign-details-container-12">

And this is how I've tried to select it:

$(document).on("click",".show-details",function () {
    $(this).blur();
    var id = $(this).data("id");
    var selector = "#campaign-details-container-"+id;
    alert(selector);

    $(selector).toggle();
    return false;
});

How can I get this to work? I could put a data-id="12" tag in the div instead and use a class, but how would I select by that?

• javascript
• jquery

• show-details is a separate button – Amy Neville Commented Feb 8, 2016 at 10:01
• 1 In the fiddle of @ArunPJohny, show-details is separated. What do you need? – Marcos Pérez Gude Commented Feb 8, 2016 at 10:02
• 2 Your initial version should work as-is. What does the HTML look like? – iCollect.it Ltd Commented Feb 8, 2016 at 10:03
• 1 jsfiddle/arunpjohny/aeo6oo70/3 – Arun P Johny Commented Feb 8, 2016 at 10:03
• 1 @AmyNeville Maybe api.jquery./category/selectors can help. – Reporter Commented Feb 8, 2016 at 10:04

1 Answer 1

Just select it using the attribute starts with syntax:

$("[id^=campaign-details-container]");

No need to go do unnecessary things with classes and id variables...

See http://www.w3schools./cssref/sel_attr_begin.asp