I'm having a problem with my script where i click the H3 it will expand and only change the first text in span no matter if i click the second H3. After i wanna collapse it , it doesn't change back to the original text.
What should i use ? TQ
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".pad").hide();
//toggle the componenet with class msg_body
jQuery(".heading").click(function()
{
jQuery(this).next(".pad").slideToggle(500);
jQuery('#span1).html('∧')
});
});
</script>
<h3 class="heading">text1<span id="span1" style="float:right;">∨</span></h3>
<div id="occ" class="pad">
content
</div>
<h3 class="heading">Text2<span id="span1" style="float:right;">∨</span></h3>
<div id="tech" class="pad">
content
</div>
You need to set up a toggle function for the arrows. As this can't be done with the html codes you need to use ids so you can target them specifically here is the jquery you need:
$(document).ready(function () {
$('.pad').hide();
$('.heading').click(function () {
$(this).next('.pad').slideToggle();
if($(this).find('.span1').attr('id') == 'yes') {
$(this).find('.span1').attr('id', '').html('∨');
} else {
$(this).find('.span1').attr('id', 'yes').html('∧');
}
});
});
Fiddle Demo:
http://jsfiddle.net/Hive7/5xueU/2/
You can try this one
$(document).ready(function() {
$(".pad").hide();
//toggle the componenet with class msg_body
$(".heading").click(function()
$heading = $(this);
$(this).next(".pad").slideToggle(500,function() {
var sign = $(this).is(':visible') ? '∧' : '∨';
$heading.find('span').html(sign)
});
});
});
I did a JsFiddle version for you to look at here: http://jsfiddle.net/gUTTK/
jQuery(document).ready(function() {
jQuery(".pad").hide();
//toggle the componenet with class msg_body
jQuery(".heading").click(function() {
jQuery(this).next(".pad").slideToggle(500);
if (jQuery(this).find('.span1').is(':visible')){
jQuery(this).find('.span1').hide();
jQuery(this).find('.span2').show();
} else {
jQuery(this).find('.span2').hide();
jQuery(this).find('.span1').show();
}
});
});
The HTML
<h3 class="heading">text1
<span class="span1" style="float: right;">∨</span>
<span class="span2" style="float: right; display: none;">∧</span>
</h3>
<div class="pad">content</div>
<h3 class="heading">text1
<span class="span1" style="float: right;">∨</span>
<span class="span2" style="float: right; display: none;">∧</span>
</h3>
<div class="pad">content</div>
Since you are selecting #span1, it's going to return only the first instance of that in your document every time. IDs must be unique. Try this instead:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".pad").hide();
//toggle the componenet with class msg_body
jQuery(".heading").click(function()
{
jQuery(this).next(".pad").slideToggle(500);
jQuery(this).find("span").html('∧')
});
});
</script>
<h3 class="heading">text1<span id="span1" style="float:right;">∨</span></h3>
<div id="occ" class="pad">
content
</div>
<h3 class="heading">Text2<span id="span2" style="float:right;">∨</span></h3>
<div id="tech" class="pad">
content
</div>
To toggle the arrows back, try checking for the visibility of the .pad element:
http://jsfiddle.net/tjnicolaides/W6nBG/
jQuery(document).ready(function () {
jQuery(".pad").hide();
//toggle the componenet with class msg_body
jQuery(".heading").click(function () {
var $pad = $(this).next(".pad");
var $arrow = $(this).find("span");
if ($pad.is(':visible')) {
$arrow.html('∨');
} else {
$arrow.html('∧');
}
$pad.slideToggle(500);
});
});
Related
I have an element that can be removed when it has the class "edit-mode". The class "edit-mode" is toggled by a button. The problem here is that when the "edit-mode" class gets removed, this element can be removed on click which shouldn't happen.
Consider the following code :
$(document).ready(function() {
$('.active-edit-mode').click(function() {
$('.my-element').toggleClass('edit-mode');
$('.active-edit-mode').toggleClass('edit-mode');
$('.my-element.edit-mode').click(function() {
$(this).remove();
});
});
});
.my-element {
color: #007aff;
cursor: pointer;
}
.edit-mode {
font-weight: bold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="elements">
<div class="my-element">
this element
</div>
<div class="my-element">
this element
</div>
<div class="my-element">
this element
</div>
</div>
<button class="active-edit-mode">
active edit mode
</button>
Jsfiddle : jsfiddle
You should check this logic in the onClick event handler of .my-element, this would be more clearer.
$(document).ready(function(){
$('.active-edit-mode').click(function(){
$('.my-element').toggleClass('edit-mode');
$('.active-edit-mode').toggleClass('edit-mode');
});
$('.my-element').click(function(){
if ($(this).hasClass('edit-mode')) {
console.log('click removing')
$(this).remove();
}
});
});
.my-element { color: #007aff;cursor:pointer; }
.edit-mode {font-weight:bold;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="elements">
<div class="my-element">
this element
</div>
<div class="my-element">
this element
</div>
<div class="my-element">
this element
</div>
</div>
<button class="active-edit-mode">
active edit mode
</button>
It will work if you bind the removal function independently. Your JS would look like:
$(document).ready(function(){
$('.active-edit-mode').click(function(){
$('.my-element').toggleClass('edit-mode');
$('.active-edit-mode').toggleClass('edit-mode');
});
});
$(document).on('click','.my-element.edit-mode',function(){
$(this).remove();
});
How can I highlight active link in the following scenario?
I gave .spcusr:hover, .spcusr:active{color:#adsder;}
In this situation hover property works but active property doesn't work as its not a static link. Is there anyway that I can show different color to active span?? thnaks
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
$( "#accordion" ).accordion({
autoHeight: false,
collapsible: true,
navigation: true
});
});
</script>
<script type="text/javascript">
$(document).ready(function () {
window.showim = function(src) {
$("#divcont").html(src);
};
});
</script>
<h3>
<a href="#" style="height:200px;">
<img src="unitedstates.jpg" width="100%" alt=""/>
</a>
</h3>
<div>
<span class="spcusr" onclick="showim('<h1>This is active now</h1>');">CLICK ME</span>
<span class="spcusr" onclick="showim('<h1>This is active now</h1>');">CLICK ME</span>
<span class="spcusr" onclick="showim('<h1>This is active now</h1>');">CLICK ME</span>
</div>
<div id="divcont"></div>
Here's a FIDDLE
.active {
background: #ddd;
}
$(function() {
$('.spcusr').click(function() {
$(this).addClass('active').siblings('.spcusr').removeClass('active');
});
});
and of course you could set active class for currently active span in HTML
<span class="spcusr active" onclick="showim('<h1>This is active now</h1>');">CLICK ME</span>
<span class="spcusr" onclick="showim('<h1>This is active now</h1>');">CLICK ME</span>
<span class="spcusr" onclick="showim('<h1>This is active now</h1>');">CLICK ME</span>
It is not possible with CSS so use jquery.
Create a separate active class and add it when click function hits.
$('.spcusr').click(function () {
$('.spcusr').removeClass('active');
$(this).addClass('active');
});
DEMO
css
.active{color:#cdcdcd}
Jquery
$(document).ready(function() {
$('.spcusr').click(function() {
$('.spcusr').removeClass('active');
$(this).addClass('active');
});
});
as per your current markup and js:
onclick="showim('<h1>This is active now</h1>', this);"
//---------------------------------------------^^^^---pass current el here
$(document).ready(function () {
window.showim = function(src, el) { //<----get it here
$(el).addClass('active').siblings('.spcusr').removeClass('.active');
$("#divcont").html(src);
};
});
in the css do this:
.spcusr:hover,
.spcusr.active{
color:#adsder;
}
add separate class for active link using jquery
http://jsfiddle.net/FsCHJ/2/
what now happens is, whenever I have another link example it will also use this link as the toggle button. I just want Toggle Edit Mode to be toggling hidden div's on/off. So I tried to change $("a").click(function () to $("toggle").click(function () and <a>Toggle Edit Mode</a> to Toggle Edit Mode`, but doesn't work. Any idea's?
HTML
<li><a>Toggle Edit Mode</a>
</li>
<div class="hidden rightButton">hello</div>
CSS
.hidden {
display: none;
}
.unhidden {
display: block;
}
JS
$(document).ready(function () {
$("a").click(function () {
$("div").toggleClass("hidden unhidden");
});
});
You want this.
<li><a class="toggle">Toggle Edit Mode</a>
$(".toggle").click(function () {
$("div").toggleClass("hidden unhidden");
}
You cannot use $("toggle"), because this looks for the html tag <toggle>. Instead add a class toggle to the link for which you want to toggle.
Use "ID" selector.
http://jsfiddle.net/FsCHJ/1/
There can be many classes (class=...) in one page but juste on id (id=...) per page. More informations here.
Javascript:
$(document).ready(function () {
$("#toggle").click(function () {
$("div").toggleClass("hidden unhidden");
});
});
Html:
<li><a id="toggle">Toggle Edit Mode</a></li>
<div class="hidden rightButton">hello</div>
$(document).ready(function () {
$("#toggle").click(function () {
$("div").toggleClass("hidden unhidden");
});
});
.hidden {
display: none;
}
.unhidden {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<li><a id="toggle">Toggle Edit Mode</a></li>
<div class="hidden rightButton">hello</div>
Use .className selector:
$(".toggle").click(function () {});
You can also use jQuery's toggle function.
$(".toggle").click(function () {
$("div").toggle();
});
Created fiddle to demonstrate toggle.
This worked for me. Allowing me to show or hide text with the same link. I associate the link with the div i want to show. This works in lists with multiple records, each record having it's own ID.
<a class="showHideToggle div1">View Details</a>
<div id="div1" style="display:none;">Record 1 details goes here</div>
<a class="showHideToggle div2">View Details</a>
<div id="div2" style="display:none;">Record 2 details goes here</div>
<script>
$(document).ready(function () {
$(".showHideToggle").click(function (ctl) {
var linkedDivName = $(this).attr('class').replace('showHideToggle ', '');
var divToToggle = $("#" + linkedDivName);
//alert('current status: ' + divToToggle.css('display'));
if (divToToggle.css('display') == 'none') {
divToToggle.css("display", "block");
$(this).text("Hide Details");
} else {
divToToggle.css("display", "none");
$(this).text("Show Details");
}
});
});
</script>
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);
});
});
I am currently using jQuery toggle to toggle between show and hide. It works perfectly fine for individual elements. When I try to do a expand all and collapse all it works fine for all the condition except one. If any individual element is already expanded or collapsed it does toggle them but not as expected. That is, when I click on expand all it expands all the elements except the individual element which is already expanded get collapsed and vice-versa. How do I take care of this condition?
<script type="text/javascript">
$(".toggle_container").hide();
$("div.description-content-title").toggle(function () {
$(this).addClass("collArrow");
}, function () {
$(this).removeClass("collArrow");
});
$("div.description-content-title").click(function () {
$(this).next(".toggle_container").slideToggle("slow");
});
$(".close-all").toggle(function () {
$(".close-all a").text("[Expand All]");
}, function () {
$(".close-all a").text("[Close All]");
});
$(".close-all").click(function () {
$(".toggle_container").slideToggle("slow");
});
</script>
HTML:
<div class="news-top-head">
<div class="time-head sortable" data-sort-column="ContentDate">
<span style="float: left; width: auto;">Time</span> <span class="sort-order-hidden ui-icon" />
</div>
<div class="description-head sortable" data-sort-column="ContentTitle">
<span style="float: left; width: auto;">Description</span> <span class="sort-order-hidden ui-icon" />
</div>
<div class="close-all">
close all
</div>
<div class="clear">
</div>
</div>
<div class="description-content">
<div class="description-content-title expArrow"><%=breakingNews[index].ContentTitle%></div>
<div class="toggle_container">
<p ><%=breakingNews[index].ContentDescription%></p>
</div>
</div>
</div>
If you have any code sample it would be really helpful.
You can't use toggle for your close-all button in that case unless you add an extra class to something to figure out which the odd one out is and ignore it. Easiest way to make this work is to use slideDown() and slideUp() instead of slideToggle(). Remove the following code:
$(".close-all").click(function () {
$(".toggle_container").slideToggle("slow");
});
And change:
$(".close-all").toggle(function () {
$(".close-all a").text("[Expand All]");
}, function () {
$(".close-all a").text("[Close All]");
});
To:
$(".close-all").toggle(function () {
$(".close-all a").text("[Expand All]");
$(".toggle_container").slideDown("slow");
}, function () {
$(".close-all a").text("[Close All]");
$(".toggle_container").slideUp("slow");
});
Check out this code if useful,
jQuery(document).ready(function($) {
$("#toggle_container").hide();
});
function showSlidingDiv(){
$("#toggle_container").animate({"height": "toggle"}, { duration: 500 });
}
Also can refer to Show-Hide div content using jQuery if required..