CODEWITHSUNDEEP
javascriptjquery
user3436467
user3436467

Reputation: 1775

show/hide div with dyamically assigned class

I am dynamically assigning the div id based on the api call back data. For example I have a bunch of data returned which is appended to a div and I can assign the div id with a unique ip address. I have full control over what I can assign i.e. DIV id or class or whatever..

I have attached an example of what the output looks like and hopefully it will clarify what i am looking for.

enter image description here

What I want to be able to achieve is when an endpoint link is clicked, it will show the respective div and hide all other DIV data boxes.. The endpoint links can made clickable and i can add onclick scripts to them or whatever needs to be done

Whether we use the div id or class name i am not fussed.

Upvotes: 1

Views: 404

Answers (2)

NewToJS
NewToJS

Reputation: 2772

This should work just fine.

Assign your div with a class, in the demo i'm using EndPoint. The onclick function will use the class to find the div element and hide it. Then it will use this the element used to trigger the function, target the div within that element and show it. 

$('.EndPoint').on('click', function () {
    $('.EndPoint').find('div').hide();
    $(this).find('div').show();
});
.EndPoint div{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="EndPoint">
  <a href="#">End Point [0]</a>
    <div><b>IP Address:</b> 216.12.145.20</div>
</div>
<div class="EndPoint">
  <a href="#">End Point [1]</a>
    <div><b>IP Address:</b> 172.230.105.123</div>
</div>
<div class="EndPoint">
  <a href="#">End Point [2]</a>
    <div><b>IP Address:</b> 206.204.52.31</div>
</div>

If you don't understand anything please leave a comment below and I will get back to you as soon as possible.

Edit - jQuery Append with onclick

var IPs=["216.12.145.20","172.230.105.123","206.204.52.31"];
//Foreach value in array
$.each(IPs, function(i,v) {
//Append to id:container
$('#container').append('<div class="EndPoint"><a href="#">End Point ['+i+']</a><div><b>IP Address:</b> '+v+'</div></div>');
});
$('.EndPoint').on('click', function () {
    $('.EndPoint').find('div').hide();
    $(this).find('div').show();
});
.EndPoint div{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container"></div>

I hope this helps. Happy coding!

Upvotes: 2

Nipuna
Nipuna

Reputation: 7026

Since elements are dynamically generated it's better to do with classes IMO.

HTML

<div id="endpoint1"> 
    <a href='#' class='clicker'>End Point 1</a>
    <p class='hideThis'>1.1.1.1</p>
</div>
<div id="endpoint2"> 
    <a href='#' class='clicker'>End Point 2</a>
    <p class='hideThis'>1.1.1.1</p>
</div>
<div id="endpoint3"> 
    <a href='#' class='clicker'>End Point 3</a>
    <p class='hideThis'>1.1.1.1</p>
</div>

JavaScript (using JQuery)

$('.clicker').on('click', function () {
    $('.hideThis').hide();
    $(this).next().show();
});

http://jsfiddle.net/ksvexr40/1

If you want to hide the content initially, just add the following CSS class which hides the content initially.

.hideThis{
    display: none;
}

Upvotes: 2

Related Questions