Slide down div on click event - javascript

I have simple slide down script that shows div on click event. The problem i have is, that onclick event doesn't work if i have it wrapped in another div. If clickable div doesn't have any parent div it works fine.
I'm using this for multiple div's, where only one is opened at once.
I need open 1 to work
Here's Fiddle
HTML
<div>
<div class="clickMore">open 1</div>
</div>
<div class="clickMore">open 2</div>
<div class="showMore" style="display:none;">
<div>text</div>
</div>
JS
$(function() {
$('.clickMore').on('click', function() {
$('.showMore').not($(this).next('.showMore')).slideUp('fast');
$(this).next('.showMore').slideToggle('fast');
});
});

Working fiddle.
The problem happen since you've two cases and the selector $(this).next('.showMore') will not return always the desired result, since when you've the .clickMore element inside a div the .next() function will not find the element because it's outside of the current div?
My suggestion id to add a condition to make sure if the related .showMore element is directly next to the clicked div or it should be targeted by adding the parent :
$(function() {
$('.clickMore').on('click', function() {
if ($(this).next('.showMore').length) {
var show_more = $(this).next('.showMore');
} else {
var show_more = $(this).parent().next('.showMore');
}
$('.showMore').not(show_more).slideUp('fast');
show_more.slideToggle('fast');
});
});
Short version of condition could be :
$(function() {
$('.clickMore').on('click', function() {
var show_more = $(this).next('.showMore');
show_more = show_more.length > 0 ? show_more : $(this).parent().next('.showMore');
$('.showMore').not(show_more).slideUp('fast');
show_more.slideToggle('fast');
});
});

Try this
$(function() {
$('.clickMore').on('click', function() {
$('.showMore').slideToggle('fast');
});
});

Working Fiddle
$(function() {
$('.clickMore').on('click', function() {
$('.showMore').hide();
var el = $(".showMore");
$(".showMore").remove();
$(this).append(el);
$('.showMore').slideToggle();
});
});
You are able to change the text content dynamically

Related

Multiple select divs with CTRL pressed

I have 10 divs
<div id="div_1" class="myDivs"></div>
<div id="div_2" class="myDivs"></div>
<div id="div_3" class="myDivs"></div>
...
O want to select 5 of them with a click handler using jQuery.
$(".myDivs").on("click", function() {
console.log('all clicked DIVs IDs...');
}
Is there a functionality to do this with jQuery? I would like to click them and get all IDs of the clicked divs. Thanks for your help!
This does the trick:
$(".markDIV").on("click", function (evt) {
if (evt.ctrlKey)
$(this).toggleClass("marked");
});
Toggle a class on each clicked div, then get an array of the ids of the divs with the class. The clicking of CTRL is a little redundant when using div elements. Try this:
$(".myDivs").on("click", function() {
$(this).toggleClass('selected');
var selectedIds = $('.selected').map(function() {
return this.id;
}).get();
console.log(selectedIds);
});
Example fiddle

get Contenteditable div html

Jsfiddle at demo.
I have a contenteditable div. I want the html of whatever I write in that div, on the click of anchor tag.
Right now, div is working but nothing is showing on click of the anchor tag.
function getcode()
{
var content = $('#my-contenteditable-div').html();
alert (content);
}
You can do this as well:
$("a").click(function () {
alert($('#my-contenteditable-div').html());
});
Here is the JSFiddle
Then you don't need to write separate functions and attach it to the onclick event attribute of the a tag
Try This
// get the link
var link = document.getElementById("linkId");
// add click listener to it
link.addEventListener("click",getcode,false);
// you handler
function getcode()
{
var content = document.getElementById("my-contenteditable-div");
alert (content.innerHTML);
}
Just you can go with jquery
Working Fiddle
$(document).ready(function() {
$('#gethtml').on('click', function(e) {
var content = $('#my-contenteditable-div').html();
alert (content);
});
});
can use this use id in a and a div to show data
<div contenteditable="true" id="my-contenteditable-div">
sdfsdfds
</div>
<a href="#" id="getcode" >Get HTML</a>
<div id="show"></div>
and jQuery
$( "#getcode" ).click(function() {
var contents = $('#my-contenteditable-div').html();
$("#show").text(contents);
});

Read id with jquery and apply action to corresponding div

I want a certain button to show a certain div. Now I need to update my javascript for every new button & div. As this will be connected to a cms, for every post it needs to work automatically. How can I read the id/class from the button dynamically to apply an action to the corresponding div?
Way of thinking:
button_xxx opens div with id xxx
button_xxx_close closes it
Here's the html:
Button 001
Button 002
...
Button 099
<div id="001">
<p>CLOSE</p>
<p>Content</p>
</div>
<div id="002">
<p>CLOSE</p>
<p>Content</p>
</div>
<div id="099">
<p>CLOSE</p>
<p>Content</p>
</div>
And the javascript:
$(document).ready(function() {
// SHOWS DIV
$('#button_001').on('click', function(){
$('#001').removeClass('movedown');
$('#001').addClass('moveup');
});
$('#button_002').on('click', function(){
$('#002').removeClass('movedown');
$('#002').addClass('moveup');
});
$('#button_099').on('click', function(){
$('#099').removeClass('movedown');
$('#099').addClass('moveup');
});
// HIDES DIV
$('.button_001_close').on('click', function(){
$('#001').removeClass('moveup');
$('#001').addClass('movedown');
});
$('.button_002_close').on('click', function(){
$('#002').removeClass('moveup');
$('#002').addClass('movedown');
});
$('.button_099_close').on('click', function(){
$('#099').removeClass('moveup');
$('#099').addClass('movedown');
});
});
You can reduce your code using startswith attribute selector in jquery
$("a[id^=button_]").click(function () {
var id = this.id.split("_")[1];
$("#" + id).removeClass("movedown").addClass("mouseup");
});
$('[class^=button_]').on('click', function () {
var id = $(this).attr("class").split("_")[1];
$("#" + id).removeClass("mouseup").addClass("movedown");
});
First snippet will select all anchor elemets with id starts with button_ and bind click event to them.
Second snippet will select all elemets with class starts with button_ and bind click event to them.
Note
If your elements are created dynamically, use the below code
$(document).on("click", "a[id^=button_]", function () {
var id = this.id.split("_")[1];
$("#" + id).removeClass("movedown").addClass("mouseup");
});
$(document).on('click', '[class^=button_]', function () {
var id = $(this).attr("class").split("_")[1];
$("#" + id).removeClass("mouseup").addClass("movedown");
});
Edit
$('[class^=button_]').on('click', function () {
// var id = this.id.split("_")[1]; <-- changedd this line
var id = $(this).attr("class").split("_")[1];
$("#" + id).removeClass("mouseup").addClass("movedown");
});
I changed the line, Because that element doesnt have id. So you should pick the classname instead.
You can use $(this).attr("class") to get the current element's class name. Then split the classname to extract the div id
Simply with toggleClass
$("a[id^=button_] , [class^=button_]").click(function () {
var id = this.id.split("_")[1];
$("#" + id).toggleClass("movedown mouseup");
});
Try with this:
$(document).ready(function() {
// SHOWS DIV
var elem = '';
$('a[id*="button_"]').on('click', function(){
elem = this.id.split('_')[1];
$('#'+elem).toggleClass('movedown moveup');
});
// HIDES DIV
$('.button_'+elem+'_close').on('click', function(){
$('#'+elem).toggleClass('movedown moveup');
});
});
You could do this without the need for regular expressions with a small change to your html
Button 001
<div id="001">
<p>CLOSE</p>
<p>Content</p>
</div>
and then add click handlers for both
$('.button_open_div').on('click', function(ev){
$('#'+$(this).data('divid')).removeClass('movedown').addClass('moveup');
});
$('.button_close_div').on('click', function(){
$('#'+$(this).data('divid')).removeClass('moveup').addClass('movedown');
});
or a toggle function
$('.button_open_div, .button_close_div').on('click', function(ev){
$('#'+$(this).data('divid')).toggleClass('movedown moveup');
});
example: http://jsfiddle.net/XXE2R/

slider active state in jquery

i have a slider whose code is
var jq = jQuery.noConflict();
jq(document).ready(function(){
jq("a.zootoggle").click(function () {
jq(this).parent().next('div.zoocontent').slideToggle('slow', function() {
jq("a.zootoggle").parent().toggleClass('active', jq(this).is(':visible'));
});
return false;
});
})
the html
<h3><a class="zootoggle">openme</a></h3>
<div class="zoocontent>content here</div>
<h3><a class="zootoggle">openme</a></h3>
<div class="zoocontent>content here</div>
this works in that it opens the correct box when clicked (the next sib of the clicked h3 containing a) but it then applies the active class to all the h3's not just the one clicked. i would like the active class to only apply to the current h3.
Would this work?
jq("a.zootoggle").click(function () {
jq(this).parent().toggleClass('active').next('div.zoocontent').slideToggle('slow');
// Note, there's no callback in the slideToggle function anymore.
return false;
});​

Event handler triggered twice instead of once

I am sorry that I have asked two questions in a few minutes.
In a html file, I got three child DIV tags in a parent DIV tag:
<div id="container">
<div id="frag-123">123</div>
<div id="frag-124">124</div>
<div id="frag-125">125</div>
</div>
Now when I click either the three child DIV tags, I will see two alert boxes pop up instead of one:
The first alert box will show something like this:
frag-123, and the second alert box will show something like this:
container
I dont know why.
I just want to get the ID value of a child DIV, not the one from the parent DIV.
<script>
$(function() {
$("div").click(function() {
var imgID = this.id;
alert(imgID);
});
});
</script>
Please help.
This is a case of event bubbling. You can stop event bubbling by giving
e.stopPropagation()
inside the click event handler.
Try
$(function() {
$("div").click(function(e) {
var imgID = this.id;
alert(imgID);
e.stopPropagation() // will prevent event bubbling
});
});
If you want to bind click event to only child elemets inside the container div then you can give like this
$("#container div").click(function(){
var imgID = this.id;
alert(imgID);
});
That's because you're binding the event handler to all DIVs. Instead, what you want is bind it only to DIVs within container:
<script type="text/javascript">
$(function() {
$("#container div").click(function() {
var imgID = this.id;
alert(imgID);
});
});
</script>

Categories