jQuery slideToggle first of class below - javascript

Here is my HTML:
<div class="row header collapse">
Content 1
<i class="fas fa-chevron-circle-up" ></i>
</div>
<div class="instructions-container">
<div></div>
<div></div>
</div>
<div class="row header collapse">
Content 2
<i class="fas fa-chevron-circle-up" ></i>
</div>
<div class="instructions-container">
<div></div>
<div></div>
</div>
Basically, I have multiple instances of this setup on one page, but on click of .collapse, I want to slideToggle ONLY the .instructions-container that is directly below the clicked collapse button.
I'd also like to toggle rotate the .fa-chevron-cirle-up 180 degrees on click as well, but again, only this clicked one.
Here is the current jQuery:
$(document).ready(function () {
$('.collapse').click(function () {
$(this).find('.instructions-container').slideToggle();
});
});

I figured out the first half with the code below:
$(document).ready(function () {
$('.collapse').click(function () {
$(this).next().slideToggle();
});
});

Related

Is this a stable way to show/hide a div and a certain "id" using jQuery or could I use a better approach?

I have two containers, one is a page of link blocks and a have another container hidden. In the hidden container there is articles that link to the main pages link blocks. So user "clicks" LINK ONE in the main container which then hides the main container, shows the originally hidden container and ONLY displays the id article it is linked to. There is then a "back to library" button which will take you back to the main container and set everything back to square one. I have it working at the moment but I'm not sure if it is the right way to achieve this? I know there is no right or wrong and if it works, it works but just wondering for peace of mind. Thanks :)
CODEPEN: https://codepen.io/mDDDD/pen/ZEObRdR
HTML:
<div class="container--article-blocks" id="articleBlocks">
<div class="article-block">
<a class="show-article" href="#articleOne">LINK ONE</a>
</div>
<div class="article-block">
<a class="show-article" href="#articleTwo">LINK TWO</a>
</div>
<div class="article-block">
<a class="show-article" href="#articleThree">LINK THREE</a>
</div>
</div>
<!-- articles -->
<div class="container--articles" id="articles" style="display: none;">
back to Library
<div id="articleOne" class="article-block-articles">One</div>
<div id="articleTwo" class="article-block-articles">Two</div>
<div id="articleThree" class="article-block-articles">Three</div>
</div>
jQuery:
$('.show-article').on('click', function (e) {
e.preventDefault();
var id = $(this).attr('href');
$(id).show().siblings('div').hide();
$('#articleBlocks').fadeOut();
setTimeout(function () {
$('#articles').fadeIn();
}, 500);
});
$('.back-to-library').on('click', function (e) {
e.preventDefault();
$('#articles').fadeOut();
setTimeout(function () {
$('#articleBlocks').fadeIn();
}, 500);
});
Consider using the callback for .fadeOut() to then call .fadeIn(). Nothing wrong with that you did, this will just ensure the item is faded out before executing further code.
$(function() {
$('.show-article').on('click', function(e) {
e.preventDefault();
var id = $(this).attr('href');
$(id).show().siblings('div').hide();
$('#articleBlocks').fadeOut(500, function() {
$('#articles').fadeIn();
});
});
$('.back-to-library').on('click', function(e) {
e.preventDefault();
$('#articles').fadeOut(500, function() {
$('#articleBlocks').fadeIn();
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container--article-blocks" id="articleBlocks">
<div class="article-block">
<a class="show-article" href="#articleOne">LINK ONE</a>
</div>
<div class="article-block">
<a class="show-article" href="#articleTwo">LINK TWO</a>
</div>
<div class="article-block">
<a class="show-article" href="#articleThree">LINK THREE</a>
</div>
</div>
<!-- articles -->
<div class="container--articles" id="articles" style="display: none;">
back to Library
<div id="articleOne" class="article-block-articles">One</div>
<div id="articleTwo" class="article-block-articles">Two</div>
<div id="articleThree" class="article-block-articles">Three</div>
</div>
You can make the visibility: hidden; after an event!
Actual example
document.getElementById("XXX").style.visibility = "hidden";
But actually, your project is just fine!
For more info, go here https://www.w3schools.com/jsref/prop_style_visibility.asp
This explains the HTML DOM visibility property!

Scroll to next class element

How can I get scroll to the next class element called section and vice versa?
Below are the code i have tried so far:-
<div class="section">
content
</div>
<div class="hero">
content
</div>
<div class="midPage">
content
</div>
<div class="section">
content
</div>
<!-- Scroll Buttons -->
<div class="prev">
<button class="prevButton">Prev</button>
</div>
<div class="next">
<button class="nextButton">Next</button>
</div>
Check this fiddle
I did it fast, only next button working, not the best approach.
Check the data- attributes and how is working, i repeat, this is not the best approach.
$(".nextButton").on('click', function(e) {
var dataGoTo = $(this).attr("data-section");
var next = $(dataGoTo).attr("data-next");
$('html, body').animate({
scrollTop: $(dataGoTo).offset().top
}, 500);
$(this).attr("data-section", next);
});

Can't get jQuery .off() to remove event handler

I can't seem to figure out why my .off('click') jQuery method isn't working considering I am removing the event binding from '.reveal-menu'. The first animation works fine as each div moves to its respective location in increments of 78. But I can't seem to get it to go back.
JQUERY
$(function(){
var userMenuDivs = $('#user-menu div:gt(1)');
userMenuDivs.hide();
$('.reveal-menu').on('click',
function(){
$(this).addClass('down');
iconSpacerCount = 78;
userMenuDivs.show();
$.each(userMenuDivs, function(index,value){
$(this).animate({top:iconSpacerCount},200);
iconSpacerCount += 78;});
});
$('.reveal-menu').off('click',
function(){
$(this).removeClass('down');
iconSpacerCount = 0;
$.each(userMenuDivs, function(index,value){
$(this).animate({top:iconSpacerCount});
});
});
});
HTML
<div id="user-menu">
<div class="reveal-menu">
<i class="fa fa-plus fa-lg"></i>
</div>
<div class="post-option">
</div>
<div class="search-option">
</div>
<div class="chat-option">
</div>
<div class="profile-option">
</div>
<div class="friends-option">
</div>
<div class="organizations-option">
</div>
<div class="public-figures-option">
</div>
<div class="sign-out-option">
</div>
</div>
Here is a link to a video to show you what I'm doing.
https://dl.dropboxusercontent.com/u/3270373/2016-06-01_21-57-20.mp4
The .off is used to remove the events. It is not used to add the opposite event of .on. You can switch the click event between two function like this:
$(function() {
var userMenuDivs = $('#user-menu div:gt(1)');
userMenuDivs.hide();
$('.reveal-menu').on('click', revealMenuOn);
});
function revealMenuOn() {
$(this).addClass('down');
$('#user-menu div:gt(1)').slideDown( "slow" );
$('.reveal-menu').off('click').on('click', revealMenuOff);
}
function revealMenuOff() {
$(this).removeClass('down');
$('#user-menu div:gt(1)').slideUp( "slow" );
$('.reveal-menu').off('click').on('click', revealMenuOn);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="user-menu">
<div class="reveal-menu">
<i class="fa fa-plus fa-lg">1</i>
</div>
<div class="post-option">
2
</div>
<div class="search-option">
3
</div>
<div class="chat-option">
4
</div>
<div class="profile-option">
5
</div>
<div class="friends-option">
6
</div>
<div class="organizations-option">
7
</div>
<div class="public-figures-option">
8
</div>
<div class="sign-out-option">
9
</div>
</div>
You can try .unbind() event.
$('.reveal-menu').unbind('click',
function(){
$(this).removeClass('down');
iconSpacerCount = 0;
$.each(userMenuDivs, function(index,value){
$(this).animate({top:iconSpacerCount});
});
});

JQuery Toggle Class Plus and minus icon issue

I have Two Divs with popular and others, i'm using jquery toggleClass for slideUp and Slidedown between two div sections currently its working fine but when i click on popular div its showing the contents of popular contents but not changing its icon with minus to plus and plus to minus vice versa for both divs can somebody help me out in resolving it Thanks!
http://jsfiddle.net/v9Evw/352/
Html
<div id="popular">
<div id="headerDivImg1" class="toggle1" id="popular_img" style='background:#4c97d0;height:30px;width:640px;'>
<span style='color:#fff;padding-left:10px;line-height:30px;'>DIV1</span>
<a class="toggle1" style='float:right;' id="popular_img" href="javascript:popular('popular_content', 'popular_img');">
</a>
</div>
<div id="popular_content" class="content" style="display: block;">
<p>welcome to Div1</p>
</div>
</div>
<br/>
<div id="others">
<div id="headerDivImg1" id="other_img" class="toggle2" style='background:#4c97d0;height:30px;width:640px;'>
<span style='color:#fff;padding-left:10px;line-height:30px;'>DIV2</span>
<a class="toggle2" style='float:right;' id="other_img" href="javascript:popular('popular_content', 'popular_img');">
</a>
</div>
<div id="other_content" class="content" style="display: block;">
<p>welcome to Div2</p>
</div>
</div>
JQUERY
$(document).ready(function()
{
var $content = $("#popular_content").show();
$(".toggle1").on("click", function(e)
{
$(this).toggleClass("expanded");
$content.slideToggle();
});
});
$(document).ready(function()
{
var $content = $("#other_content").hide();
$(".toggle2").on("click", function(e)
{
$(this).toggleClass("expanded");
$content.slideToggle();
});
});
CSS
.toggle1
{
display:inline-block;
height:27px;
width:41px; background:url("minus.png");
}
.toggle1.expanded
{
background:url("plus.png");
}
.toggle2
{
display:inline-block;
height:27px;
width:41px; background:url("plus.png");
}
.toggle2.expanded
{
background:url("minus.png");
}
I think this might help
HTML
<div class="div1container">
<div class="glyphicon glyphicon-plus divcontainer" data-toggle="collapse" data-target="#demo">Div1</div>
<div id="demo" class="collapse">
Div 1 Content
</div>
</div>
<div class="div2container">
<div class="glyphicon glyphicon-plus divcontainer" data-toggle="collapse" data-target="#demo2">Div2</div>
<div id="demo2" class="collapse">
Div 2 Content
</div>
</div>
CSS
.divcontainer{
background:aqua;
width:100%
}
Jquery
$(document).ready(function () {
$('.glyphicon-plus').click(function () {
$(this).parent("div").find(".glyphicon-plus")
.toggleClass("glyphicon-minus");
});
});

create a toggle navbar on html page

I am trying to create a toggle menu bar for php website.
html code
<div class="row">
<div class="col-sm-4 col-md-3 sidebar">
<div class="mini-submenu" >
<img src="icons/nav_icon.png" height="30" width="30" >
</div>
<div class="list-group">
<span href="#" class="list-group-item">
Submenu
<span class="pull-right" id="slide-submenu"><i class="fa fa-times"></i></span>
</span>
<i class="fa fa-comment-o"></i> Lorem ipsum
</div>
</div>
</div>
script code
$(function(){
$('#slide-submenu').on('click',function() {
$(this).closest('.list-group').fadeOut('slide',function(){
$('.mini-submenu').fadeIn();
});
});
$('.mini-submenu').on('click',function(){
$(this).next('.list-group').toggle('slide');
$('.mini-submenu').hide();
})
})
At present the one that i have works fine but the problem is that when the first time i open the page the submenu that is under the nav_bar image gets opened automatically and when i click on cross button
then the nav_bar image appears like this
but what i want is opposite to it. i wish that whenever the page is loaded the image should appear first and when i click on the image the submenu should appear under it.
change your script to
$(function(){
$('.list-group').hide();
$('.mini-submenu').show();
$(function(){
$('#slide-submenu').on('click',function() {
$(this).closest('.list-group').fadeOut('slide',function(){
$('.mini-submenu').fadeIn();
});
});
$('.mini-submenu').on('click',function(){
$(this).next('.list-group').toggle('slide');
$('.mini-submenu').hide();
})
})
});
It will work fine :
JavaScript:
(function($){
$('.list-group').hide();
$('#slide-submenu').on('click',function() {
$(this).closest('.list-group').fadeOut('slide',function(){
$('.mini-submenu').fadeIn();
});
});
$('.mini-submenu').on('click',function(){
$(this).next('.list-group').toggle('slide');
$('.mini-submenu').hide();
})
})(jQuery);

Categories