i have bootstrap Modal . and i have 3 images on it . what i want that when i click on any of this images change HTML of div.text , but its change all the div that take .text class i need change the html of the current div that i opened the modal . any help !!
<div class="Widget">
<div class="press">
<a data-toggle="modal" data-target="#myModal"></a>
<div class="text">test111</div>
</div>
</div>
<div class="Widget">
<div class="press">
<a data-toggle="modal" data-target="#myModal"></a>
<div class="text">test2222</div>
</div>
</div>
<div class="Widget">
<div class="press">
<a data-toggle="modal" data-target="#myModal"></a>
<div class="text">test3333</div>
</div>
</div>
Jquery :
$("#img1").click(function(){
$(".text").html("Its woking")
});
I just made a Bootply with following code:
$("a[data-toggle='modal']").click(function(){
$("a[data-toggle='modal']").removeClass("active");
$(this).addClass("active");
});
$("#myModal img").click(function(){
$("a.active").next(".text").html("Its working");
});
When a Modal link is clicked, it sets the class active to the link that opened the modal. When an image in the modal is clicked, the text that should be changed can be identified as it's the text next to the active link.
The only adjustment of your markup was to add some example content inside the anchor tag - <a data-toggle="modal" data-target="#myModal">Modal</a> instead of <a data-toggle="modal" data-target="#myModal"></a>, otherwise it wouldn't be possible (at least for this example) to open the modal.
Just in case - the bootply already wraps the code in a $(document).ready(), so the above code has to be wrapped in
$(document).ready(function() {
// above code here
});
in order to work.
Update: As mentioned as comment, above approach doesn't work for the original markup because there the div with the class text is not next to the link, but there are other divs between them.
I've adjusted this in another Bootply with following code change:
$("#myModal img").click(function(){
$("a.active").closest(".Widget").find(".text").html("Its working");
});
When the image is clicked, closest() selects the closest parent of the active link and find() selects the child element with the class text.
Depending on the actual markup it's also possible to select closest(".press") instead of closest(".Widget") (both will work for this example), it's only necessary to select a parent container of the link and the text.
Because Bootply was sometimes down when I made these changes, I've added this also in a Fiddle without bootstrap, just as example for the functionality.
For reference: http://api.jquery.com/closest/
can not see where $('#img1') in the code your provided. But I guess what you need is $(this), something like:
$('.imgs').click(function(){
$(this).html()....
});
Related
I have 2 button like links, which toggle the class "active" for their respective 'arrowbox' divs. here is the html for that:
<span class="ct"><a class="fa fa-shopping-cart"><sup id="itm_count">31</sup></a></span>
<div class="cart">
hello world
</div>
<span class="ai"><a class="fa fa-plus"></a></span>
<div class="arrow_box">
<a style="margin-top: 5px;" onclick="new_dis()">Add distributor</a>
</div>
both the arrow-box and cart divs have display property set to none, but when I click the buttons 'ct' or 'ai' they appear on screen with following jquery:
$(".ai").click(function () {
$(".arrow_box").toggleClass("active");
$(".cart").RemoveClass("active");
});
$(".ct").click(function () {
$(".cart").toggleClass("active");
$(".arrow_box").RemoveClass("active");
});
the problem here is when one div is active ('cart' or 'arrow_box') and I click on the other button, the previous active div should not display on the screen, but it is.. how do I solve it?
also here is the fiddle to better understand the problem
thanks
your code is correct but there is a little problem you wrote RemoveClass but the actual function is removeClass. here is the example :-
$(".cart").removeClass("active");
$(".arrow_box").removeClass("active");
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.
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.
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">
End Point [0]
<div><b>IP Address:</b> 216.12.145.20</div>
</div>
<div class="EndPoint">
End Point [1]
<div><b>IP Address:</b> 172.230.105.123</div>
</div>
<div class="EndPoint">
End Point [2]
<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">End Point ['+i+']<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!
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;
}
I'm a beginner with jQuery and I have this HTML:
<a class="a2a_dd" href="https://www.addtoany.com/share_save"><img src="//static.addtoany.com/buttons/favicon.png" width="0" height="0" border="0" alt="Share"/>Share</a>
<div id="share-btns">
<div id="facebook">
<a class="a2a_button_facebook"></a>
</div>
<div id="google_plus">
<a class="a2a_button_google_plus"></a>
</div>
<a class="a2a_button_twitter">
<div id="twitter"></div>
</a>
</div>
I am trying to use jQuery to make it so when you click on the .a2a_dd link, it will toggle the #share-btns div visibility. Here is my code:
(function($){
Drupal.behaviors.toggle = {
attach: function() {
$('.a2a_dd').click(function() {
$('#share-btns').fadeToggle();
});
}
};
})(jQuery);
The problem is, I have a grid of teaser articles all on the same page that all have this HTML on them and when I click on the .a2a_dd link on any of the teasers it toggles the #share-btns div on only the first teaser on the page. Is there a way to get jQuery to recognize the node that was clicked on so it can toggle the div from that same node? Any help would be greatly appreciated.
A quick fix using next(). You need to target the element right after the toggle link (according to your html structure).
$('.a2a_dd').click(function() {
$(this).next().fadeToggle();
});
Plunker example.
What I need
I need when user click on link data is shown.
link disappear after click.
I have tried code
<a href="javascript:void(0);" class="viewdetail more"
style="color:#8989D3!important;">view details
<div class="speakers dis-non">
</div>
</a>
jquery code
$('.viewdetail').click(function() {
$(this).find('.speakers').show();
$(this).find('.viewdetail').hide();
});
problem
when I click on view detail link data is shown on div.
link doesn't disappear.
if I put anchor before div then data is not shown on speaker class div.
any suggestion are most welcome.
jsfiddle: http://jsfiddle.net/fw3sgc21/
Since the div is inside the anchor, the div will also be hidden if you hide the anchor. You need to put the div next to the anchor to make it work. Use next() method to select the div.
HTML
view detail
<div class="speakers dis-non" style="display: none">
test data to be shown
</div>
JS
$('#viewdetail').on('click', function(){
// show div with speakers class next to the anchor
$(this).next('div.speakers').show();
// hide the anchor
$(this).hide();
});
JSFiddle: http://jsfiddle.net/fw3sgc21/2/
EDIT
If you want to wrap the speakers div inside another div as below
view detail
<div class="12u">
<div class="speakers dis-non">
test data to be shown
</div>
</div>
with the following CSS
.dis-non
{
display: none;
}
Here's the JS that should show the speakers div and hide the clicked anchor
$('#viewdetail').on('click', function(){
$(this).next().children('div.speakers').show();
$(this).hide();
});
JSFiddle: http://jsfiddle.net/fw3sgc21/6/
EDIT 2
If you want to put the anchor inside two divs as below
<div class="a">
<div class="b">
view detail
</div>
</div>
<div class="12u">
<div class="speakers dis-non">
test data to be shown
</div>
</div>
Use .parent() method twice to select <div class="a">, then use .next().children('div.speakers').show() to show the speakers div
$('#viewdetail').on('click', function(){
$(this).parent().parent().next().children('div.speakers').show();
$(this).hide();
});
JSFiddle: http://jsfiddle.net/fw3sgc21/8/
Try the following:
$('.viewdetail').click(function()
{
$('.speakers').show();
$(this).hide();
});
$(this) refers to the .viewdetail so you don't need the find it again
Pull the div outside the hyperlink
HTML:
view details
<div class="speakers dis-non"></div>
try this
html
<a href="javascript:void(0);" id="viewdetail" style="color:green">view detail
</a>
<div class="speakers dis-non">
test
</div>
js
$('#viewdetail').click(function() {
$('.speakers').show();
$(this).hide();
});
http://jsfiddle.net/fw3sgc21/1/
First of all this in your code refers to to the clicked link itself.
So this line $(this).find('.viewdetail').hide(); doesn't work, because there is no .viewdetail inside of link. It should be
$('.viewdetail').on('click',function(e) {
var self = $(this);
self.find('.speakers').show();
self.hide();
});
But, if you hide your link, the .speakers will be also hidden, because it's inside of your link. If you want it to be visible, you should place it outside of link
For example:
view details
<div class="speakers dis-non"></div>
And JS:
$('.viewdetail').on('click',function(e) {
var self = $(this);
e.preventDefault(); // prevent link from working the way it should
self.next('.speakers').show();
self.hide();
});
I want to show and hide a div, but I want it to be hidden by default and to be able to show and hide it on click. Here is the code that I have made :
<a class="button" onclick="$('#target').toggle();">
<i class="fa fa-level-down"></i>
</a>
<div id="target">
Hello world...
</div>
Here I propose a way to do this exclusively using the Bootstrap framework built-in functionality.
You need to make sure the target div has an ID.
Bootstrap has a class "collapse", this will hide your block by
default. If you want your div to be collapsible AND be shown by
default you need to add "in" class to the collapse. Otherwise the
toggle behavior will not work properly.
Then, on your hyperlink (also works for buttons), add an href
attribute that points to your target div.
Finally, add the attribute data-toggle="collapse" to instruct
Bootstrap to add an appropriate toggle script to this tag.
Here is a code sample than can be copy-pasted directly on a page that already includes Bootstrap framework (up to version 3.4.1):
Toggle Foo
<button href="#Bar" class="btn btn-default" data-toggle="collapse">Toggle Bar</button>
<div id="Foo" class="collapse">
This div (Foo) is hidden by default
</div>
<div id="Bar" class="collapse in">
This div (Bar) is shown by default and can toggle
</div>
Just add water style="display:none"; to the <div>
Fiddles I say: http://jsfiddle.net/krY56/13/
jQuery:
function toggler(divId) {
$("#" + divId).toggle();
}
Preferred to have a CSS Class .hidden
.hidden {
display:none;
}
Try this one:
<button class="button" onclick="$('#target').toggle();">
Show/Hide
</button>
<div id="target" style="display: none">
Hide show.....
</div>
I realize this question is a bit dated and since it shows up on Google search for similar issue I thought I will expand a little bit more on top of #CowWarrior's answer. I was looking for somewhat similar solution, and after scouring through countless SO question/answers and Bootstrap documentations the solution was pretty simple. Again, this would be using inbuilt Bootstrap collapse class to show/hide divs and Bootstrap's "Collapse Event".
What I realized is that it is easy to do it using a Bootstrap Accordion, but most of the time even though the functionality required is "somewhat" similar to an Accordion, it's different in a way that one would want to show hide <div> based on, lets say, menu buttons on a navbar. Below is a simple solution to this. The anchor tags (<a>) could be navbar items and based on a collapse event the corresponding div will replace the existing div. It looks slightly sloppy in CodeSnippet, but it is pretty close to achieving the functionality-
All that the JavaScript does is makes all the other <div> hide using
$(".main-container.collapse").not($(this)).collapse('hide');
when the loaded <div> is displayed by checking the Collapse event shown.bs.collapse. Here's the Bootstrap documentation on Collapse Event.
Note: main-container is just a custom class.
Here it goes-
$(".main-container.collapse").on('shown.bs.collapse', function () {
//when a collapsed div is shown hide all other collapsible divs that are visible
$(".main-container.collapse").not($(this)).collapse('hide');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
Toggle Foo
Toggle Bar
<div id="Bar" class="main-container collapse in">
This div (#Bar) is shown by default and can toggle
</div>
<div id="Foo" class="main-container collapse">
This div (#Foo) is hidden by default
</div>