How to toggle (jQuery) with an anchor - javascript

I have a small problem with jQuery.
The situation:
I have a piece of jQuery code, where I toggle results.
JS Code:
//Set default open/close settings
$('.acc_container').hide(); //Hide/close all containers
//$('.acc_trigger:first').addClass('active').next().show(); //Add "active" class to first trigger, then show/open the immediate next container
//On Click
$('.acc_trigger').click(function(){
if( $(this).next().is(':hidden') ) { //If immediate next container is closed...
$('.acc_trigger').removeClass('active').next().slideUp(); //Remove all .acc_trigger classes and slide up the immediate next container
$(this).toggleClass('active').next().slideDown(); //Add .acc_trigger class to clicked trigger and slide down the immediate next container
}
return true; //Prevent the browser jump to the link anchor
});
Now I want to open - toggle an item on anchor position from the URL like (http://x.com/page.php#toggleItem2)
Question:
How read toggleItem2 from URL and open exactly this section?
Additional:
HTML Code:
<div class="container">
<h2 class="acc_trigger">Item1</h2>
<div class="acc_container">
<div class="block">
Inner Text in toggle 1
</div>
</div>
<h2 class="acc_trigger">Item2</h2>
<div class="acc_container">
<div class="block">
Inner Text in toggle 2
</div>
</div>
<h2 class="acc_trigger">Item3</h2>
<div class="acc_container">
<div class="block">
Inner Text in toggle 3
</div>
</div>
</div>
I hope the problem is clearly defined.

You should give your divs IDs according to the anchors, e.g.
<h2 class="acc_trigger">Item1</h2>
<div id="toggle1" class="acc_container">
<div class="block">
Inner Text in toggle 1
</div>
</div>
You can get the document fragment from the location object:
document.location.hash
Then it is simply (assuming the other containers are all hidden):
$(document.location.hash).slideDown().prev().addClass('active');

Try jquery toggle itself
http://api.jquery.com/toggle/

This is held within the window.location.hash variable.

You can do something like this:
http://jsfiddle.net/b6Znw/
Javascript:
$().ready(function(){
$('.acc_trigger a').click(function(){
$(this).closest('.acc_trigger').next('.acc_container').toggle()
return false;
})
})

Related

I can't handle to select the correct div (using Jquery)

$(document).ready(function() {
$(".myClass").click(function () {
$(".myClass", $(this)).first().scrollIntoView({behavior: "smooth",block: "start"});
});
});
.myClass {
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class=myClass>I click on this div
</div>
<div class=otherClass>Some random text
</div>
<div>
<div class=otherClass>Some random text
</div>
<div>
<div class=myClass>I want to scroll to this div
</div>
Here is my problem, i have this pattern that repeats itself several times in my page. Div having the class "otherClass" are generated dynamically in variable quantity.
<div>
<div class=myClass>
</div>
</div>
<div>
<div class=otherClass>
</div>
</div>
<div>
<div class=otherClass>
</div>
</div>
<div>
<div class=myClass>
</div>
</div>
My goal is by clicking on a "myClass" div to scroll down the window (using scrollIntoView()) to the next div with the same class.
I added a click event on each "myClass" div but i can't manage to select the next one. I tried to add a context to my selector $(".myClass", $(this)) to search only after the clicked div but it doesn't work (always returning me the current div ?).
I also tried using next() to "move" to the next div but i'm struggling with the fact that there is an unknown numbers of "otherClass" div between them.
What am i doing wrong ?
Sorry if my explanation isn't clear and thank you for your help.
Up to your html structure .myClass doesn't have any next .myClass on its level .. See the next code
$('.myClass').on('click' , function(){
$(this)
.parent() // select the parent div
.nextAll('div:has(.myClass)') // select the next div which has .myClass in it
.first() // select just one div next
.find('.myClass') // find the .myClass in this div
.addClass('Next'); // add class to it
});
.Next{
background : red;
color : #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div class=myClass>myClass</div>
</div>
<div>
<div class=otherClass>Other</div>
</div>
<div>
<div class=otherClass>Other</div>
</div>
<div>
<div class=myClass>myClass</div>
</div>
<div>
<div class=otherClass>Other</div>
</div>
<div>
<div class=otherClass>Other</div>
</div>
<div>
<div class=myClass>myClass</div>
</div>
Additional: if you need to reverse you'll need to use prevAll instead of nextAll and .last() instead of .first()
This will work no jQuery needed.
Here is the fiddle example: https://jsfiddle.net/e1xz74wj/
JS
let scrollToNext = 0;
const elements = document.querySelectorAll('.myClass');
document.getElementById('btn').addEventListener('click', () => {
++scrollToNext
if (scrollToNext < elements.length) {
elements[scrollToNext].scrollIntoView();
}
})
Explanation:
Increment the counter after clicking on the button to scroll to the desired element (finding element by specified className).
Each time a click occurs the counter is incremented by one hence the next element is selected. When the counter reaches the max amount of found elements it doesn't increment anymore.

Collapsible container/column. Adding more than one link

I'm trying to create a drop down effect similar to this image: GIF, however with what I have so far: EXAMPLE I can't seem to figure out a way to add more than one link, if I do add just another content div it doesn't show up.. Hope someone can help, been losing sleep over this haha. Thanks
HTML:
<div class="container">
<div class="header">Projects</div>
<div class="content" onclick="initContent('example')"><em>Example Project</em></div>
</div>
JS:
$(".header").click(function() {
$header = $(this);
//getting the next element
$content = $(this).next();
//checking if its already visible
$content.slideToggle(500, function() {
//execute this after slideToggle is done
//change text of header based on visibility of content div
$header.text(function() {});
});
});
What I would try:
<div class="container">
<div class="header">Projects</div>
<div class="content" onclick="initContent('example')"><em>Example Project</em></div>
<div class="content" onclick="initContent('exampleNew')"><em>Example Project 2</em></div>
</div>
Just put all your links in a single content div:
https://jsfiddle.net/sfcm95yz/3/
<div class="content">
<div class="item" onlclick="initContent('example')">
<em>Example Project</em>
</div>
<div class="item" onlclick="initContent('example2')">
<em>Example Project 2</em>
</div>
</div>
It's because you are sliding down the content div that is right after the header class element ($content = $(this).next();), which applies a display: block to it. If you add another content div, it isn't going to be right after that header and so won't be shown.
You can either change your JavaScript to target all content divs, or rearrange your HTML, something like this:
<div class="container">
<div class="header">Projects</div>
<div class="content">
<div onclick="initContent('example')">
<em>Example Project</em>
</div>
<div onclick="initContent('example')">
<em>Example Project 2</em>
</div>
<div onclick="initContent('example')">
<em>Example Project 3</em>
</div>
</div>
</div>
If you want to modify your JS and keep the existing markup, .nextAll() will select all of $header's siblings (.next() only selects one sibling). You can also add a selector argument to be sure you only select elements with the class "content".
$(".header").click(function() {
$header = $(this);
//getting the sibling ".content" elements
$content = $(this).nextAll(".content");
//checking if its already visible
$content.slideToggle(500, function() {
//execute this after slideToggle is done
//change text of header based on visibility of content div
$header.text(function() {});
});
});

How to show/hide single div only with jquery .slidetoggle

How to show/display a single one div only when user click with jquery
For example when user click the "Promo" the promo content will show,
and when user click "Sports" the sports content will display and the promo content will hide... so on
I have this working code but when I click it shows all the content at once.
HTML
<div class="clickto_showme">Promo</div>
<div class="showcontent">
<p> Content for promo </p>
</div>
<div class="clickto_showme">Sports</div>
<div class="showcontent">
<p> Content for Sports </p>
</div>
<div class="clickto_showme">News</div>
<div class="showcontent">
<p> Content for News </p>
</div>
CSS
.showcontent {
display: none;
}
JS
$('.clickto_showme').click(function() {
$('.showcontent').slideToggle('slow');
return false;
});
A working JSFIDDLE is here http://jsfiddle.net/jowa513p/2/
Use $(this) to manipulate the required element relative to the current element clicked; and next() to get the sibling.
$('.clickto_showme').click(function() {
$(this).next('.showcontent').slideToggle('slow');
return false;
});
Updated Fiddle

Clone and append on click makes multiple elements and toggle not working

I am trying to clone and append elements. after i append i have added a toggle animation. on first click it works fine. after i am getting mutliple elements appended.
as well the animation not working.
here is the html:
<div class="parent hide">
<div class="header">
<h6>Header</h6>
</div>
<div class="content">
<p>paragraph content </p>
</div>
</div>
<div id="content">
</div>
<button>Add</button>
Js :
$('.parent').on('click', '.header', function () {
$(this).find('h6').toggleClass('name').end()
.siblings('.content').slideToggle();
});
$('button').on('click', function () {
var newParent = $('.parent').clone();
$('#content').append(newParent.removeClass('hide'));
});
JSfiddle
UPDATE:
I updated the cloning passing var newParent = $('.parent').clone(true); - animation works!
you should clone only the first element (or the last for that matter):
var newParent = $('.parent:first').clone(true);
EXAMPLE 1
Using .clone(true) seems to fix the animation. Another solution is targeting the parent on click and delegating .parent .header since the cloned .parent is being added to the DOM after the initial load:
$('#content ').on('click', '.parent .header', function () {
instead of
$('.parent').on('click', '.header', function () {
EXAMPLE 2
Cloning an elements means there will be two identical elements (having the same class aswell) afterwards.
Each time you click the button, all elements having the .parent class are cloned and appended to the #content
Regarding the animation:
The appended elements are not known to the DOM, so the .on('click') is not working.
Try to put a wrapper around your .parent elements and then use the following syntax:
HTML
<div class="wrapper">
<div class="parent hide">
<div class="header">
<h6>Header</h6>
</div>
<div class="content">
<p>paragraph content </p>
</div>
</div>
<div id="content">
</div>
</div>
<button>Add</button>
JS
$('.wrapper').on('click', '.parent .header', function(){ [...] });

Can't create simple text slides

I try to create simple slides for text and can't figure out why separate paragraphs start to show up. What i need is to change full div blocks with class text-block.
Here is the html:
<div id="text-blocks">
<div class="text-block">
<p>paragraph1</p>
<p>paragraph2</p>
</div>
<div class="text-block">
<p>paragraph3</p>
<p>paragraph4</p>
<p>paragraph5</p>
<p>paragraph6</p>
<p>paragraph7</p>
</div>
</div>
and js:
$(document).ready(function(){
$('.text-block:gt(0)').hide();
setInterval(function(){
$('#text-blocks :first-child').fadeOut()
.next().fadeIn()
.end()
.appendTo('#text-blocks');
},
3000);
})
Link to jsFiddle: http://jsfiddle.net/e2wFK/
You just need to change a selector to contain only direct children of #text-blocks
$('#text-blocks > :first-child').fadeOut()
jsFiddle Demo
Your previous selector $('#text-blocks :first-child') was selecting every first child inside #text-blocks, including the first paragraphs inside .text-block elements.

Categories