I've put this jQuery together, when the document is ready the div with a class of bio.read_more is hidden.
The default behaviour for the a tag is removed with e.preventDefault
When btn.expand_bio is clicked bio.read_more is displayed.
The only problem is all the bio.read_more divs are displayed? I only want the one that's related to expand. Can anyone help?
$(document).ready(function(){
$(".bio.read_more").hide();
$(".btn.expand_bio").click(function(e){
e.preventDefault();
$(".bio.read_more").toggle();
});
});
(update) Added HTML
<div class="bio intro">
<p>Intro paragraph</p>
<a class="btn expand_bio" href="#">Read more</a>
</div>
<div class="bio read_more">
<p>Expanded text here</p>
</div>
</div>
Use this as reference to the element being clicked.
$(document).ready(function() {
$(".bio.read_more").hide();
$(".btn.expand_bio").click(function(e) {
e.preventDefault();
$(this).closest('.bio.intro').next('.read_more').toggle();
});
});
Related
Expected logic:
On mouse over main-navigation button, show - "advantage" Div container.
If user mouse over on "advantage" Div container, still show this container and allow user to click.
On mouse out of "Button" & "advantage" container - hide "advantage" Div container.
Present Behaviour:
On mouse over main-navigation button, show - "advantage" Div container.
If user mouse out of "Button", "advantage" container fade out & fade in. User cant able to click.
Not sure, which logic is missed out. If user on "advantage" container, it should not hide or fadeout.
HTML:
<div class="main-navigation">
Button
</div>
<div class="advantage">
<div class="content">
<p>demo content to load test</p>
</div>
</div>
JS:
$('.main-navigation .button').on('mouseover', function(){
$('.advantage).fadeIn(400);
});
$('.main-navigation .button').on('mouseleave', function(){
$('.advantage).fadeOut(800);
}).find("button, a").on("click", function (e) {
e.stopPropagation();
});
<div class="fadebox">
<div class="main-navigation">
Button
</div>
<div class="advantage" style="display: none;">
<div class="content">
<p>demo content to load test</p>
</div>
</div>
</div>
$('.main-navigation .button').on('mouseover', function (e) {
$('.advantage').fadeIn();
$('.advantage').find("button, a").on("click", function (e) {
e.stopPropagation();
});`enter code here`
});
$('.fadebox').on('mouseleave', function () {
$('.advantage').fadeOut();
})
Check this solution.it will work fine as per your request.
The main problem is that your html button style class is given with missing double quotes (").
HTML
<div class="main-navigation">
Button
</div>
<div class="advantage">
<div class="content">
<p>demo content to load test</p>
</div>
</div>
You can also use jquery for mouse actions (.mouseover() and .mouseleave()) as shown below:
JS:
$(".main-navigation .button").mouseover(function(){
$('.advantage').fadeIn(400);
});
$(".main-navigation .button").mouseleave(function(){
$('.advantage').fadeOut(800);
}).find("button, a").on("click", function (e) {
e.stopPropagation();
});
I have created a script that when a button is clicked it displays all of the content beneath it and hides the other buttons content. The only problem I'm having is that I want to refactor the script so it only works if you hit the button, instead of the entire div the button sits in as it's causing some confusion. What would be the best way about this?
<div class="signup-button">
<button type="button" class="btn btn-default">Subscribe</button>
<div class="signup-form" style="display:none;">
Content
</div>
</div>
<div class="signup-button">
<button type="button" class="btn btn-default">Subscribe</button>
<div class="signup-form" style="display:none;">
Content
</div>
</div>
<div class="signup-button">
<button type="button" class="btn btn-default">Subscribe</button>
<div class="signup-form" style="display:none;">
Content
</div>
</div>
<div class="signup-button">
<button type="button" class="btn btn-default">Subscribe</button>
<div class="signup-form" style="display:none;">
Content
</div>
</div>
jQuery:
(function($) {
$(".signup-button").on('click', function() {
$(".signup-button").not(this).find(".signup-form").hide();
$(this).find(".signup-form").toggle("slow");
});
})(jQuery);
JSFiddle: https://jsfiddle.net/v6bmphct/3/
One option would be to attach the event listener directly to the descendant button element. In doing so, the click event isn't triggered when clicking on the other content. You would also have to change instances of $(this) to $(this).parent() or $(this).closest('.signup-button').
Updated Example
$(".signup-button .btn").on('click', function(e) {
$(this).parent().find(".signup-form").toggle("slow");
$(".signup-button").not($(this).parent()).find(".signup-form").hide();
});
Alternatively, since event.target is a reference to the clicked element, you could also just check to see if event.target is the button element by using the .is() method:
Updated Example
$(".signup-button").on('click', function(e) {
if ($(e.target).is('.btn')) {
$(this).find(".signup-form").toggle("slow");
$(".signup-button").not(this).find(".signup-form").hide();
}
});
Check this out:
(function($) {
$(".signup-button").find('button').on('click', function() {
$(this).siblings(".signup-form").toggle("slow");
$(".signup-button").not(this.closest(".signup-button")).find(".signup-form").hide();
});
})(jQuery);
I have the following code:
<div class="item-wrapper">
<div class="item-inner-wrapper">
<div class="some-class">Stuff</div>
<div class="this-class">
<a class="button alt small hide-description">Toggle Description</a>
</div>
</div>
<div class="item-child-desc">SOMETHING HIDDEN</div>
</div>
And this is the script I use to display .item-child-desc:
$(document).ready(function(e) {
$(".hide-description").on("click", function(e) {
$(e.target).parents(".item-wrapper").find(".item-child-desc").slideToggle(500);
});
});
... that is initiated hidden:
.item-child-desc {
display: none;
}
item-inner-wrapper gets generated every time a button is pressed and Toggle Description is displayed in a new row.
The JavaScript code I tried to create is not really working. I tried many different approaches but nothing. It only makes the first row item disappear, the others the event doesn't work.
EDIT > RESOLVED
Either John's or Saar's version works fine and it must be put on . Otherwise the script will be copied together with the rows and executed n times. That's why it was not working properly when I clicked to show the div.
here is a fiddle that use jQuery event delegation:
http://jsfiddle.net/hz0q0yys/3/
$(document).ready(function(e) {
$("#container").on( "click", "a.hide-description", function(e) {
console.log(e.target);
$(e.target).parents(".item-wrapper").find(".item-child-desc").slideToggle(500);
});
});
Try event delegation this way
$(document).ready(function(e) {
$(document).on("click", ".hide-description", function(e) {
$(e.target).parents(".item-wrapper").find(".item-child-desc").slideToggle(500);
});
});
.item-child-desc {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="item-wrapper">
<div class="item-inner-wrapper">
<div class="some-class">Stuff</div>
<div class="this-class">
<a class="button alt small hide-description">Toggle Description</a>
</div>
</div>
<div class="item-child-desc">SOMETHING HIDDEN</div>
</div>
I am using a Simple Modal plugin to create a pup Up in My web page
<script src="/scripts/jquery.simplemodal.js"></script>
<div>
<div class="txt-panel" id="124853" >
<div class="container">
<p>some text,... read more</p>
<p class="popup" style="display:none" id="P1">More text, this will be a popup</p>
</div>
</div>
<div class="txt-panel" id="5464641" >
<div class="container">
<p>some text2,... read more</p>
<p class="popup" style="display:none" id="P2">More text, this will be a popup2</p>
</div>
</div>
</div>
Script
$(function(){
$(".poper").click(function(e){
$(this).parents('.container').find(".popup").modal({
overlayClose:true,
escClose:true,
maxWidth:500,
overlayClose: true,
opacity:50,
containerCss:{background:"#f5d495"}
});
event.preventDefault();
});
});
This works good. But only problem is that PopUp comes at the center of the page. But I want popup to come right above my anchor tag (class="popup"). Is it possible with Simple Modal popup. Or is there any other better way to achieve what I am trying to achieve? Like any other plugin?
Note: Fiddle
You can set position option
$(function(){
var anchorPosition = $(".popup").position();
$(".poper").click(function(e){
e.preventDefault();
$(this).parents('.container').find(".popup").modal({
overlayClose:true,
escClose:true,
maxWidth:500,
overlayClose: true,
opacity:50,
position:[anchorPosition.top,anchorPosition.left],
containerCss:{background:"#f5d495"}
});
});
});
Your fiddle couldn't work,but i think you can also use jQuery's.appendTo(); and stick the modal to the desired relative container for better position control.This should happen right before the modal pops.
I have a problem : I use classes on a div for simplicity, I would like to show a hidden div after a click, but only on that div, the problem is it shows on all divs, and I can't seem to get it working, here is a jsfiddle with the problem : http://jsfiddle.net/cWNvT/
HTML:
<div class="left">
Edit
<div class="edit">
<p>edit here</p>
</div>
</div>
<div class="left">
Edit
<div class="edit">
<p>edit here</p>
</div>
</div>
<div class="left">
Edit
<div class="edit">
<p>edit here</p>
</div>
</div>
JavaScript:
$(document).ready(function() {
$('.edit').hide();
$('.left a.edit-click').click(function() {
$('.left').children().show();
});
});
Anyone have a solution for this ?
Try this working fiddle.
$(document).ready(function() {
$('.edit').hide();
$('.left a.edit-click').click(function(){
$(this).parent().children().show();
});
});
All I have done is use $(this).parent() instead of using your $(".left") selector.
Try finding the parent of the clicked element only, and using its children:
http://jsfiddle.net/cWNvT/1/
$(document).ready(function() {
$('.edit').hide();
$('.left a.edit-click').click(function(){
$(this).closest(".left").children().show();
});
});
$(".left") selects all elements with class .left in the document. $(this).closest(".left") finds the first parent of the clicked link that has class .left.
Change your code to this:
$('.left a.edit-click').click(function(){
$(this).next('.edit').show();
});
http://jsfiddle.net/cWNvT/3/