I have this code, works fine but the problem is when I click on link (1) shows all the DIVs while I need each Link showing ONLY its own div.
Java Script
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();
});
});
Map //Link(1)
<div class="slidingDiv">
hide
</div>
Map//Link(2)
<div class="slidingDiv">
hide
</div>
Map//Link(3)
<div class="slidingDiv">
hide
</div>
//...............And so on.....
If I click on any of those links it shows all the DIVs while it should show just its own one.
How to do that?
You are targeting all elements with slidingDiv class, Change below code
$(".slidingDiv").slideToggle();
As below and try
$(this).next(".slidingDiv").slideToggle();
Update*:
You have show_hide class as child of slidingDiv to handle it's click event try below code
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
var div = $(this).next(".slidingDiv");
console.log(div);
if (!div.length) {
div = $(this).parent('.slidingDiv');
}
console.log(div);
div.slideToggle();
});
});
jsFiddle
Try this;
HTML:
Map //Link(1)
<div class="slidingDiv">
hide1
</div>
Map//Link(2)
<div class="slidingDiv">
hide2
</div>
Map//Link(3)
<div class="slidingDiv">
hide3
</div>
jQuery:
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
$(this).next().slideToggle();
});
});
Here is the fiddle: http://jsfiddle.net/MrvXB/
Related
I want to use some divs like tabs with jQuery in my project . Inside the div I want to use another jQuery plugin . I built those div tabs manually with jQuery and the default style for second and more divs are display: none with pure css or class name . When I change display of divs to display: block the second jQuery plugin inside the div not working .
Only second jQuery plugin can work correctly when I use code blow for hiding divs and don't using pure css or class name :
$('div.selector').hide();
The problem shows in this case , when html page loading for first time , there is a delay about 1sec to hide divs with jquery . Any suggestion except using loading logo for this case ?
I used bootstrap tabs and the problem still exist too .
How can I use pre-defined class or pure css to display: none divs for this case and client click to the button to show div and second jQuery plugin work correctly inside the div ?
<div class="tabs-wrapper">
<div class="tab-container tab1">
some code here
</div>
<div class="tab-container tab2 d-none">
<div>
second jquery plugin code here
</div>
</div>
</div>
<button id="btn1">Btn1</button>
<button id="btn2">Btn2</button>
<script>
$(function(){
$('#btn1').click(function () {
$('.tabs-wrapper .tab1').addClass('d-none');
$('.tabs-wrapper .tab2').removeClass('d-none');
});
$('#btn2').click(function () {
$('.tabs-wrapper .tab2').removeClass('d-none');
$('.tabs-wrapper .tab1').addClass('d-none');
});
});
</script>
When I used css class or inline style for hiding divs , the second jQuery plugin not working , the second plugin like same jquery sliders .
Please attach an example of the inner code you want it to run.
But anyway, a code doesn't run only because you hide or display a div. for that you should handle an event fired when your div is displayed.
Anyway, for properly displaying or hiding the div, you have a bug in yoer code.
here is 2 possible fixes (one is marked out )
<style>
.d-none
{
display:none;
}
</style>
<body>
<div class="tabs-wrapper">
<div class="tab-container tab1">
some code here
</div>
<div class="tab-container tab2 d-none">
<div>
second jquery plugin code here
</div>
</div>
</div>
<button id="btn1">Btn1</button>
<button id="btn2">Btn2</button>
<script>
//Option 1
$(function(){
$('#btn1').click(function () {
$('.tabs-wrapper .tab1').addClass('d-none');
$('.tabs-wrapper .tab2').removeClass('d-none');
});
$('#btn2').click(function () {
$('.tabs-wrapper .tab1').removeClass('d-none');
$('.tabs-wrapper .tab2').addClass('d-none');
});
});
/* Option 2
$(function(){
$('#btn1').click(function () {
$('.tab1').hide();
$('.tab2').show();
});
$('#btn2').click(function () {
$('.tab2').hide();
$('.tab1').show();
});
});
*/
</script>
$('#btn1').click(function () {
$('.tabs-wrapper .tab1').addClass('d-none');
$('.tabs-wrapper .tab2').removeClass('d-none');
});
$('#btn2').click(function () {
$('.tabs-wrapper .tab1').removeClass('d-none');
$('.tabs-wrapper .tab2').addClass('d-none');
});
.d-none
{
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tabs-wrapper">
<div class="tab-container tab1">
some code here
</div>
<div class="tab-container tab2 d-none">
<div>
second jquery plugin code here
</div>
</div>
</div>
<button id="btn1">Btn1</button>
<button id="btn2">Btn2</button>
You can try this way
$(function(){
$('#btn1').click(function () {
$('.tabs-wrapper .tab1').addClass('d-none');
$('.tabs-wrapper .tab2').removeClass('d-none');
});
$('#btn2').click(function () {
$('.tabs-wrapper .tab1').removeClass('d-none');
$('.tabs-wrapper .tab2').addClass('d-none');
});
});
Followed by the HTML DOM:
<div class="opt">
Options
<div class="panel">
<h3>i am in panel!!</h3>
</div>
</div>
When i click on the .opt it would show the .panel content, but then i need to trigger another event to hide the .panel when clicking outside of the .opt element.
jQuery:
$('.opt').click(function(){
var $this = $(this);
$this.find('.panel').fadeIn();
$this.blur(function(){
$this.find('.panel').fadeOut();
alert('i am from blur');
});
});
Here is a demo JsFiddle
But the blur() method is not executing, what i am doing wrong here technically?
You can try a click event on body instead of blur. Take a look at
https://jsfiddle.net/y0wsfpvb/7/
$('.opt').click(function(){
var $this = $(this);
$this.find('.panel').fadeIn();
});
$('body').click(function (e){
if( $(e.target).closest(".opt").length > 0 == false) {
$('.panel').fadeOut();
alert('fake blur');
}
});
This works if you define de tabindex property for the div...
Try:
HTML
<div class="opt" tabindex="3">
Options
<div class="panel">
<h3>i am in panel!!</h3>
</div>
</div>
JS
$('.opt').click(function(){
$(this).find('.panel').fadeIn();
$(this).blur(function(){
$(this).find('.panel').fadeOut();
alert('i am from blur');
});
});
You could bind the fade out action to the body's on click handler, and then add:
event.stopPropagation();
to your opt class click handler to achieve this.
Here is an example on codepen
I am trying to make use of a JQuery snippet to hide some content on SharePoint. It works without the <p> element, but SharePoint has a lot of stuff in between the div so I think that's why it's not working.
JQuery:
jQuery(document).ready(function() {
jQuery(".ms-wpcontentdivspace").hide();
//toggle the componenet with class msg_body
jQuery(".ms-webpart-chrome-title").click(function(e)
{
e.preventDefault();
jQuery(this).next("div.ms-wpcontentdivspace").slideToggle(200);
});
});
Here's the working code:
<div class="ms-webpart-chrome-title"><h2><span>Hello</span> </h2></div>
<div class="ms-wpcontentdivspace">Hi there. I am hidden</div>
<div class="ms-webpart-chrome-title"><h2>Another title</h2></div>
<div class="ms-wpcontentdivspace">More hidden stuff</div>
Here's the code that doesn't:
<div class="ms-webpart-chrome-title"><h2><span>Hello</span></h2></div>
<p>some text</p>
<div class="ms-wpcontentdivspace">Hi there. I am hidden</div>
<div class="ms-webpart-chrome-title"><h2>Another title</h2></div>
<div class="ms-wpcontentdivspace">More hidden stuff</div>
Here's a Jsfiddle. Thanks!
The jQuery version used 1.3.x is pretty old, anyway try
jQuery(document).ready(function () {
jQuery(".ms-wpcontentdivspace").hide();
//toggle the componenet with class msg_body
jQuery(".ms-webpart-chrome-title").click(function (e) {
e.preventDefault();
jQuery(this).nextAll("div.ms-wpcontentdivspace").eq(0).slideToggle(200);
});
});
Demo: Fiddle
$.next() only gets the immediately following sibling, so you will want to use $.nextAll()
jQuery(document).ready(function() {
jQuery(".ms-wpcontentdivspace").hide();
//toggle the componenet with class msg_body
jQuery(".ms-webpart-chrome-title").click(function(e)
{
e.preventDefault();
jQuery(this).nextAll("div.ms-wpcontentdivspace").eq(0).slideToggle(200);
});
});
Hi I am making an effect that is when Mouse Enter in div one button shows in that div and when user mouse leave that area again button hide.
It works but the problem is that I have used div many times so I have used class for div definition.
So when Mouse enter in one div other div also affected.
Code :
jQuery:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#container").mouseenter(function(){
$(":button").show();
});
$("#container").mouseleave(function(){
$(":button").hide();
});
});
</script>
jsp code :
<div id="container">
<div class="mainitemlist">
<div class="mainitemlistimage">
<a href="product?pid=3">
<img src="product_images/Tulips1760331818.jpg" height="125px" width="100px" style="border-radius:2px;">
</a>
</div>
<div class="mainitemlistname"><div align="center">Nokia Lumia 925</div></div>
<div class="mainitemlistprice"><div align="center">38000</div></div>
<div class="mainitemlistfeatures"><div align="center">null</div>
<button type="button" style="display: none;">Hide me</button></div>
</div>
<div class="mainitemlist">
<div class="mainitemlistimage">
<a href="product?pid=5">
<img src="product_images/Jellyfish456319058.jpg" height="125px" width="100px" style="border-radius:2px;">
</a>
</div>
<div class="mainitemlistname"><div align="center">HCL Me</div></div>
<div class="mainitemlistprice"><div align="center">40000</div></div>
<div class="mainitemlistfeatures"><div align="center">null</div>
<button type="button" style="display: none;">Hide me</button></div>
</div>
</div>
I have try to put Jquery on class="mainitemlist" but It's not working.
So I have added in id="container".
Anyone have idea, why it's not working ???
You can do this:
$(document).ready(function () {
$(".mainitemlist").mouseenter(function () {
$(this).find(":button").show();
}).mouseleave(function () {
$(this).find(":button").hide();
});
});
Demo: Fiddle
When you used the class mainitemlist you were not using the function scope properly using $(this) and hence it showing all the button on mouseenter, since you used the code:
$(":button").show();
UPDATE
$(document).ready(function () {
$(document).on('mouseenter', '.mainitemlist', function () {
$(this).find(":button").show();
}).on('mouseleave', '.mainitemlist', function () {
$(this).find(":button").hide();
});
});
try:
$(document).ready(function(){
$("#container").mouseenter(function(){
$("#container button").show();
});
$("#container").mouseleave(function(){
$("#container button").hide();
});
});
check out this fiddle.
b.t.w, you have 2 divs with the id of container. this is probably a mistake, and if not, it's bad practice.
hope that helps.
$("#container").mouseenter(function(){
$(this).find('#yourbutton').show();
});
$("#container").mouseleave(function(){
$(this).find('#yourbutton').hide();
});
The following function toggles a div when clicked on the relative id. Any way to set it up so that when the page loads, the div being toggled starts out closed?
I dont want them to be seen until clicked on.
Best,
Joey
<script type="text/javascript">
$(document).ready(function() {
$("#architects").click(function() {
$(".exclusive-architects").toggle();
});
$("#international").click(function() {
$(".exclusive-international").toggle();
});
$("#designers").click(function() {
$(".exclusive-designers").toggle();
});
$("#historical").click(function() {
$(".exclusive-historical").toggle();
});
});
</script>
Just hide them on dom ready, like this:
<script type="text/javascript">
$(document).ready(function() {
$(".exclusive-architects, .exclusive-international,
.exclusive-designers, .exclusive-historical").hide();
$("#architects").click(function() {
$(".exclusive-architects").toggle();
});
$("#international").click(function() {
$(".exclusive-international").toggle();
});
$("#designers").click(function() {
$(".exclusive-designers").toggle();
});
$("#historical").click(function() {
$(".exclusive-historical").toggle();
});
});
</script>
You should just need to add a display:none to your starting CSS
DEMO
if your HTML looks like this:
<div id="buttons">
<div>toggle architects</div>
<div>toggle international</div>
<div>toggle designers</div>
<div>toggle historical</div>
</div>
<div class="cont"> architects content </div>
<div class="cont"> international content </div>
<div class="cont"> designers content </div>
<div class="cont"> historical content </div>
Than all you need is:
$('.cont').hide(); // HIDE ALL INITIALLY
$('#buttons div').click(function(){
$('.cont').eq( $(this).index() ).toggle();
});
$(function(){ // DOM ready
$(".exclusive-architects").hide();
$(".exclusive-international").hide();
$(".exclusive-designers").hide();
$(".exclusive-historical").hide();
});
it should work :)