I have a page and I want to show some paragraphs after clicking a link, before that it should be hidden. So i wrote a simple JQuery code, but the problem is when I click the open link all the other hidden divs are also shown. My code is given below please advice how to solve the issue.
HTML
<div>
Read More
<div class="expand_div">
<img src="images/close_button.gif" width="50" height="12" alt="Close" border="0" />
<p>My hidden content goes here..</p>
</div>
</div>
and I want to repeat the above <div> block 7 times. So when I click the first div's Read more button the remaining 6 hidden divs are also showing!!!
JQuery
<script language="JavaScript">
$(document).ready(function(){
$('a.open_div').click(function(){
$('.expand_div').show();
});
$('a.close_div').click(function(){
$('.expand_div').hide();
});
});
</script>
how to solve this issue..?
any answers would be appreciated!
Thanks
Paul
try this instead of your JQuery code:
<script language="JavaScript">
$(document).ready(function(){
$('a.open_div').click(function(){
$(this).parent().find('.expand_div').show();
});
$('a.close_div').click(function(){
$(this).parent().hide();
});
});
</script>
The problem with your code is that it's selecting ALL divs inside your page. and this is not what you want.
to solve this issue, this code is only limiting the scope of the action to the current link container, so the other divs will remain as is without any change.
Well, the selectors will select all elements with that class. If you keep your structure like this, you can do the following:
$(document).ready(function(){
$('a.open_div').click(function(){
$(this).next().show();
});
$('a.close_div').click(function(){
$(this).closest('.expand_div').hide();
});
});
As the div is the next sibling of the open link, next() will select the div and show it. The close link on the other side is a descendant of the div. closest() will find the closest ancestor that matches the selector.
Of course there are also other ways to select the elements.
See a working DEMO.
In your open event you need to open the "next" element in the DOM:
$('a.open_div').click(function() {
$(this).next().show();
});
In your close event you need to close the enclosing (parent) element:
$('a.close_div').click(function() {
$(this).parent().hide();
});
see http://jsfiddle.net/raybellis/vZbp3/
You are getting all "expand_div" elements and showing them. You need to only select the appropriate elements as related to this element.
<script language="JavaScript">
$(document).ready(function(){
$('a.open_div').click(function(){
$(this).siblings('.expand_div').show();
});
$('a.close_div').click(function(){
$(this).parent().siblings('.expand_div').hide();
});
});
</script>
Related
I'm a novice in jQuery coding, and I need help with my code.
I have a button that allows me to reveal a hidden section on my website, but at the moment the button remains even though I want him to disappear.
My website is built with Wordpress and Divi.
With the following code, you will have my latest attempt with the hide/show value in CSS.
<style type="text/css">
.rv_button.closed:after {content:"";}
.rv_button.opened:after {content:"";}
.hide {display:none;}
.show {display:block;}
</style>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#reveal').hide();
jQuery('.rv_button').click(function(e) {
e.preventDefault();
jQuery("#reveal").slideToggle();
jQuery('.rv_button').toggleClass('opened closed');
});
});
</script>
If you want to see what it looks like, you can see the example here: https://divinotes.com/reveal-a-hidden-divi-section-row-or-module-on-button-click/
You're toggling classes named opened and closed, while your CSS shows that hide and show are the ones affecting element's presence in the final render of the page. Also there's probably no need for most classes. You can just add the hide one.
Chance your last non-trivial line to
jQuery('.rv_button').addClass('hide');
If you already have show class applied to the button, then your original idea makes sense. You just need to change the classes to match the ones you defined in styles.
jQuery('.rv_button').toggleClass('show hide');
Just add $(this).hide() in your click function.
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#reveal').hide();
jQuery('.rv_button').click(function(e) {
e.preventDefault();
jQuery("#reveal").slideToggle();
jQuery('.rv_button').toggleClass('opened closed');
// Hide button
$(this).hide()
});
});
</script>
Thanks everyone for your involvment in my question. I managed to use the solution of #vmf91 which works like a charm. Thanks again guys and have a lovely day.
Do you want to remove the button after clicking over it? If so, you just need to insert the following line inside the button event:
jQuery(this).hide();
The complete click event:
jQuery('.rv_button').click(function(e) {
e.preventDefault();
jQuery(this).hide();
jQuery("#reveal").slideToggle();
//You don't need this if you want to hide the button
//jQuery('.rv_button').toggleClass('opened closed');
});
I'm trying to implement an accordian style box on some content. However there are 4-6 of these boxes on 1 template, all with different classes for obvious reasons. However I want to try and make the code as easy to read as possible and I don't want to duplicate the code for each class name. I'm assumung jQuerys (this) method would work but i'm not 100% sure how to use it.
Here is my JS code:
<script type="text/javascript">
$(document).ready(function(){
$(".block-50_hoverHeader").click(function (){
//alert("clicked");
$(".scrollText").slideToggle(1000);
});
});
</script>
So the .scrollText class is the div that holds all the content which needs to be displayed after the onClick function. But currently when I click the header all the .scollText divs appear on the page. So i want it to only appear on the parent header div that is being clicked.
Here the HTML:
<div class="block-50 left textHoverWrapOne">
<img src="" alt="" /> (Image working as BG Image)
<div class="block-50_hoverHeader"><p>This is a header!</p></div>
<div class="block-50_textHoverOne trans_click scrollText">
This is the content that needs to be displayed after the
</div>
</div>
Find the scrollText relative to the clicked block-50_hoverHeader element. In this case it is the next sibling, so you can use .next()
Inside the event handler this points to the element in which the handler is registered, in this case it is the block-50_hoverHeader element, so we can find the next scrollText using $(this).next()
jQuery(function ($) {
$(".block-50_hoverHeader").click(function () {
$(this).next().slideToggle(1000);
});
});
Demo: Fiddle
There are a number of ways to accomplish this. I prefer to grab the shared parent and then use find as I find this is a bit less likely to break due to minor modifications to the html structure.
$(".block-50_hoverHeader").click(function (){
$(this).closest(".textHoverWrapOne").find(".scrollText").slideToggle(1000);
});
Why not targeting the whole div??
jQuery(function ($) {
$(".block-50").click(function () {
$(this).find('.scrollText').slideToggle(1000);
});
});
I am trying to show a div on click on an anchor, the issue is the anchor is inside an element and the div that needs to be shown is outside of this element. There are multiple divs of the same class on the page so I only want to show the associated one.
The markup is:
<div class="wrapper">
<div class="trigger">
Change
</div>
<div class="content">
<p>Content to be shown when Change is clicked</p>
</div>
</div>
Is that what you want to do? (fiddle)
// dom ready
$(function() {
$('a.change').on('click', function() {
// wrapper div
$(this).parent()
.next() // .content div
.show();
return false; // prevent the link to be followed
});
});
With jQuery you can do it like this:
$('a.change').click(function(e) {
e.preventDefault();
$(this).parent().next().toggle();
});
jsFiddle example
is this what you mean?
$(".content").hide();
$("a.change").click(function(){
$(".content",$(this).closest(".wrapper")).show();
});
Live demo :
http://jsfiddle.net/dfkge/
Got to the parent and get the correct div e.g.
$('a.change').click(function(event){
event.preventDefault();
$(this).parents('.wrapper').children('.content').show()
}
This way you don't have to worry how deeply embedded anchor is, or where is content (before, after) in relation to anchor
Added a jsFiddle, showing divs with different structures, working with same code
http://jsfiddle.net/NWqcq/11/
I'm trying to write a function in jQuery that will add a class to a selected link (which opens a page in an iframe) then remove that class when another link is selected. I received some help from another member here before for a similar type of thing, but that involved radio buttons and tables.
I tried playing with it for awhile, but jQuery is still pretty new to me so I don't know a whole lot about it.
Basically, I have about 3-4 groups of links contained in <div id="CollapsiblePanelContent"> ... </div> and I would like to add a style to the <a> tag within this container that the user selected.
Any help would be greatly appreciated. Thank you.
<div id="CollapsiblePanelContent">
Link1
Link2
Link3
Link4
</div>
<script type='text/javascript'>
$(function() {
$('div').click(function(event) {
$(this).closest('.CollapsiblePanelContent').addClass('selected').parent().siblings().each(function() {
$(this).find('.CollapsiblePanelContent').removeClass('selected');
});
});
});
</script>
$('#CollapsiblePanelContent a').on('click', function(e){
e.preventDefault(); // prevent page reload, you may remove it if don't need
$(this).addClass('selected').siblings().removeClass('selected');
});
As CollapsiblePanelContent is id so correct selector will be #CollapsiblePanelContent not .CollapsiblePanelContent.
But if you use CollapsiblePanelContent for multiple divs then instead of id it should be class with selector .CollapsiblePanelContent. Because multiple elements can have same id.
You can try :
function handlelink(this)
{
$(this).siblings().removeClass('selected');
$(this).addClass('selected');
//do the rest with the click
}
Based on the HTML you've provided the following should work:
$(function() {
$('.CollapsiblePanelContent a').click(function() {
$(this).addClass('selected').siblings().removeClass('selected');
});
});
That binds the click event handler to any <a> elements inside <div class="CollapsiblePanelContent">, which adds the selected class to the clicked link, and removes the same class from all of its siblings.
I asked a precursor to this question here:
Click link in DIV and show PHP/HTML in separate DIV
Then, after I removed the first script shown below, I was able to get the second script to work. I revised my question, but it appears to have gone silent. So I have a slightly modified question.
What is the conflict between the 2 scripts below and how can I modify them to work in tandem? Basically I want to be able to click anywhere in the DIV (".side_items") and have the child anchor links open in a separate DIV ("#main_content")
Javascript:
<script type="text/javascript">
$(document).ready(function(){
$(".side_items").click(function(){
window.location=$(this).find("a").attr("href");
return false;
})
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$(".side_items a").click(function(e){
e.preventDefault();
$("#main_content").load($(this).attr("href"));
});
});
</script>
HTML: (slightly simplified)
<div id="main_content">
</div>
<div id="right_side">
<div class="side_items">
<a href="content.html">
<img src="images/examplethumb.png" /><br />
Content</a>
</div>
</div>
Both scripts work independently to achieve their individual desired result.
This will do it:
$(document).ready(function(){
$(".side_items").click(function(){
$("#main_content").load($(this).find("a").attr("href"));
return false;
})
});
Breaking it down:
$(".side_items").click(fn);
Find all the elements with a class of side_items and assign a click event handler (fn) to them. Each time one of these elements is clicked, fn is executed with the context of the element. In the discarded code you were using the selector .side_items a, which meant the click handler was only bound to the links inside the div, not the div itself.
$(this).find("a").attr("href")
Find all the links that are contained within the current element (this), and get the value of the href attribute from the first element found. In the discarded code the context (this) was a link. Since our handler is now bound to the containing div, the context is also the div. To get the link you have to find it.
$("#main_content").load(href);
Find the element with an id of main_content and load the content found at href into it. In the discarded code you were setting location.href, which causes the page to navigate away.
I think your issue is that you're trying to assign the $().ready(..) handler twice.
Try combing scripts like this
<script type="text/javascript">
var change_location = function(){
$(".side_items").click(function(){
window.location=$(this).find("a").attr("href");
return false;
});
}
var load_location = function(){
$(".side_items a").click(function(e){
e.preventDefault();
$("#main_content").load($(this).attr("href"));
});
}
$().ready(function(){
change_location();
load_function();
});
</script>
Hope that helps