JQuery does not hide div if p element is before it? - javascript

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);
});
});

Related

Jquery plugin not working after display block with jquery

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');
});
});

Add a class with hover effect in jquery

I want creating a website with some small news on the start-page. I show only the pics and show the headline and a small sentence with an hover-effect. Unfortunately I have no experience with jQuery and my code doesn't work.
$(document).ready(function () {
$(this).removeClass("#news-container .newscontent")
});
$(document).ready(function () {
$("#news-container img").hover(function () {
$(this).addClass("#news-container .newscontent");
}, function () {
$(this).removeClass("#news-container .newscontent");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
If you want to toggle some class or the visibility of some childs with jquery the dom stucture is key. Let's assume you got the following structure:
<div class="newscontent">
<img class="image" src="...">
<div class="text">Some text</div>
</div>
The following code registers for the hover event on every image within an element with a newcontent class. The image with the hover $(this) searches for the next element with a text class and toggles the visibility.
$('.newscontent img').hover(function(){
if ( $(this).next('.text').css('visibility') === 'visible' ){
$(this).next('.text').css('visibility', 'hidden');
}else{
$(this).next('.text').css('visibility', 'visible');
}
});
You can find a full working example here:
https://jsfiddle.net/3xy8ar96/1/

Link onClick event needs to show just one DIV

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/

Toggle a div to be closed on load?

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 :)

How to implement a blinds toggle effect with jQuery

I'm trying to write a "blinds" function that would close a DIV in a display:none mode. The unseen DIV is inside a wider DIV, containing the blind trigger.
This:
$(document).ready(function () {
$("#toggle_blind").click(function () {
$(this).toggle("fast");
});
});
Well, this blinds the button. How can I add a DIV to $this? Something like:
<div id="blind" class="wider_div">
<h3 id="closeButton">Close</h3>
<div style="display:none;" id="closeThis">
<p>some text</p>
</div>
</div>
How do I make the Close Button on H3 to close/open the CloseButton DIV on each click?
The div is the next sibling of the h3 so you can use .next()
E.g
$('#closeButton').click( function(){
$(this).next().toggle();
});
Reference the div directly, you may put something else in between it and the h3.
$(document).ready(function()
{
$("#closeButton").click(function()
{
$("#closeThis").toggle("fast");
});
});

Categories

Resources