jQuery .slideToggle() to also close other tabs - javascript

I have two sections, each with 3 divs, opening on slideToggle. How can I close the other 2 divs in each section when 1 is open?
https://jsfiddle.net/koteva/mdx20uqe/2/
<div id="stage1">
<h2 id="location-1">Location</h2>
<div id="location-1t">grjryjj</div>
<h2 id="jersey-1">JERSEY </h2>
<div id="jersey-1t" style="display: none;"> ighlgkiuluil </div>
<h2 id="details-1">details</h2>
<div id="details-1t" style="display: none;">fykyuk </div>
</div>
<div id="stage2">
<h2 id="location-2">Location2</h2>
<div id="location-2t">grjryjj</div>
<h2 id="jersey-2">JERSEY2 </h2>
<div id="jersey-2t" style="display: none;"> ighlgkiuluil </div>
<h2 id="details-2">details2</h2>
<div id="details-2t" style="display: none;">fykyuk </div>
</div>

With your jsFiddle, you could replace all your js code with
$('h2').click(function(event){
var $this = $(event.target),
id = $this.attr('id');
if($('#'+id+'t').is(':visible')){ // To not slide up and down if clicking an already open element.
$this.parent().children('div').slideUp();
} else {
$this.parent().children('div').slideUp();
$('#'+id+'t').slideToggle();
}
});
as seen in this jsFiddle. This hides the content inside the same stage when you click a header, assuming you follow the same naming convention throughout your entire html code.
I would however recommend, if you can, to perhaps clean up your html a little.
Look at this jsFiddle for an example.
Unless your code has to have your current structure, I would recommend refactoring it into using similar classes and as such be able to write cleaner code.
$('.header').click(function(event){
var $this = $(event.target);
$this.siblings().slideToggle();
$this.parent().siblings().children('.content').slideUp();
});
Would with the structure in the jsFiddle html provide you with the functionality you want.

If you want to do it in simple way. You can do it as follows. its just one function written. But it is simple and line of code will be increased
$( "#details-2" ).click(function() {
$( "#location-2t").hide( "slow");
$( "#jersey-2t").hide( "slow");
$("#details-2t").show("slow");
});
For more complex div structure and the Ids are in the same format as you have specified in your sample code following code will be very useful.
<script>
$(document).ready(function(){
$("div h2").click(
function() {
var thisId = $(this).attr("id");
$("#"+thisId+"t").show("slow");
$(this).siblings("div").not($("#"+thisId+"t")).hide("slow");
});
});
</script>

Related

toggling div and adding and removing class

i have some divs i wanna toggle i am able to toggle but unable to remove classes when ever i click on the next div
index.php
<div id="menu_top1" class="menu_top1">LINK 1</div>
<div id="menu_top" class="menu_top">LINK 2</div>
<div id="content_area1" style="display:none;">
THIS IS LINK 1
</div>
<div id="content_area2" style="display:none;">
THIS IS LINK 2
</div>
Jquery.js
$('#menu_top1').click(function() {
$('#content_area1').toggle('slow', function() {
$('.menu_top1').toggleClass('active');
});
});
Here is a Fiddle https://fiddle.jshell.net/kunz/t5u6mcmn/
if you are trying to show corresponding content_area when you click on link and make the link active? you can check this
fiddle
i saw you using same id for multiple elements.just edited them.
still you want same id for all elements(strictly not recommended) check this fiddle
check this updated fiddle
$('.menu_top').click(function() {
var index = $( this ).index() + 1;
console.log(index);
$('[id^="content_area"]' ).hide();
$('#content_area' + index ).toggle('slow', function() {
$('.menu_top').toggleClass('active');
});
});

Hiding div that contains specific string

I've been trying to hide divs that contain particular string using the other solutions suggested on this site, however none worked (most likely due to my inexperience with jQuery)
I'd like to completely hide all divs that (in this example) contain the string 'zynthesized'
<div class="photos-wrapper" id="detailPhoto-977355202965894535_11842652">
<div class="pseudo">
zynthesized
</div>
<div class="image-wrapper">
<img src="https://scontent.cdninstagram.com/hphotos-xfp1/t51.2885-15/s150x150/e15/11195725_518243828313545_1133319712_n.jpg"></div>
<div class="activites">
<span class="popular_picto ss-star "></span>
<div class="album-relative detail-photo-album-977355202965894535_11842652" style="display: none;">
<input type="hidden" class="apalbumsPhoto" value="977355202965894535_11842652">
<input type="hidden" class="apalbumsPhoto-977355202965894535_11842652" value="">
</div>
<span class="nb_comment_score">0</span>
<span class="comment_picto ss-chat"></span>
<span class="nb_like_score">4</span>
</div>
<div class="nouveau-commentaire">
<textarea id="comment-977355202965894535_11842652" class="textareaCommentaire" placeholder="Your comment"></textarea>
<img src="http://static.iconosquare.com/images/loading.gif" class="commentLoading">
</div>
</div>
From what I've seen something like
$('.photos-wrapper:contains("zynthesized")').hide()
Should be closest to what I need, but I've had no luck with it.
Any help would be amazing!
Thanks for the help guys! Turns out that the script was working however as the page loaded new divs automatically when scrolling, the script had to be run after the page loaded them.
The final script looks like
$(window).load(function(){
$(".photos-wrapper:contains('zynthesized')").hide();
});
$(window).on('scroll', function() {
var y_scroll_pos = window.pageYOffset;
var scroll_pos_test = 150;
if(y_scroll_pos > scroll_pos_test) {
$(".photos-wrapper:contains('zynthesized')").hide();
}
});
Hopefully this helps anyone looking to do something similar!
You can simply use a regex.
<script>
var ptrn = /zynthesized/g;
$( "div" ).each(function( index ) {
if(ptrn.test($( this ).text())){
$( this ).hide();
}
});
</script>
Here is simple snippet : jsfiddle.net/dariubs/hgbm3doa

Show certain DIVs with onclick

In a Blog you can determine a tag for each post e.g. Video, Photo, Quote etc... If I created a div class for each tag e.g.
<div class="Video"></div>
<div class="Photo"></div>
<div class="Quote"></div>
How can I create a onclick link so when I click it only shows div's called Video and hides all other div's?
DEMO HERE
Using Jquery....
$(document).ready(function()
{
$('.filter').click(function(e)
{
e.preventDefault();
var filter = $(this).html();
$('.boxes').hide();
$('.'+filter).show();
});
});
Then in your HTML
<a class="filter">Video</a>
<a class="filter">Photo</a>
And your divs....
<div class="boxes Video">Blahblah</div>
<div class="boxes Photo">Blahblah</div>
Or you can do it using data attributes, to keep your HTML more readable...but this works too
DEMO HERE
I'd recommend using jQuery for this. And it would be much better if you give all your "tag" divs a class like, for example, tag and separated with a space it's specific type.
For example class="tag audio". But this should work for now:
$('div').click(function () {
var tags = ['Video', 'Photo', 'Quote'], tag = $(this).attr('class');
if ($.inArray(tag, tags)) {
$('.' + tag).show();
$('div').not('.' + tag).hide();
}
});

Changing content in a div when a link is clicked

I am trying to change a div content box when a link above that box is clicked. I added a click function to the individual buttons then the corresponding dive containing the content for that particular box should be displayed.
When I apply the jQuery to the page, the content does not change according to the link that is clicked and the page displays awkwardly.
This is the jsfiddle I'm working with.
The webpage I'm working with is here.
Place where am i making the mistake.
The jQuery I'm working with so far looks like this
$(document).ready(function() {
$('.question1').click(function(){
$('.new_member_box_display').load('#answer1');
})
$('.question2').click(function(){
$('.new_member_box_display').load('#answer2');
})
$('.question3').click(function(){
$('.new_member_box_display').load('#answer3');
})
$('.question4').click(function(){
$('.new_member_box_display').load('#answer4');
})
});//end of ready
The HTML I'm working with looks like this :
<div class="new_member_box">
<h4>Vision</h4>
</div>
<div class="new_member_box">
<h4>Church History</h4>
</div>
<div class="new_member_box">
<h4>Becoming a Member</h4>
</div>
<div class="new_member_box">
<h4>Pastor-in-Training</h4>
</div>
</div>
<div class="clear" class="question"></div>
<div id="answer1">
1
</div>
<div id="answer2">
2
</div>
<div id="answer3">
3
</div>
<div id="answer4">
4
</div>
<div class="new_member_box_display" id="question">
Text will appear here when one of the tabs above is clicked
</div>
load() loads an external file with ajax, not elements on your page. You're probably just trying to hide and show elements :
$('[class^="question"]').on('click', function(e){
e.preventDefault();
var numb = this.className.replace('question', '');
$('[id^="answer"]').hide();
$('#answer' + numb).show();
});
FIDDLE
Here's a fiddle that does what I think you're looking to do. There are cleaner ways to do it, but this should work.
http://jsfiddle.net/PZnSb/6/
Basically you want to set the inner html of one element to the inner html of another, like this:
$('.question1').click(function(){
$('.new_member_box_display').html($('#answer1').html());
})
instead of this:
$('.question1').click(function(){
$('.new_member_box_display').load('#answer1');
})
It seems you just want the text to change when you click, try this.
$(document).ready(function() {
$('.question1').click(function(){
$('.new_member_box_display').text($('.answer1 ').text());
});
$('.question2').click(function(){
$('.new_member_box_display').text($('.answer2').text());
});
$('.question3').click(function(){
$('.new_member_box_display').text($('.answer3').text());
});
$('.question4').click(function(){
$('.new_member_box_display').text($('.answer4').text());
});
});
http://jsfiddle.net/cornelas/PZnSb/7/embedded/result/

How to stay within a 'instance' using JQuery

I'm currently learning JavaScript/JQuery, but have an issue at work that I'm running into.
I've assigned a class of 'question' to an<a>tag, and 'answer' to a<div>. When a user clicks on the question, the answer will slide down. However, the problem I'm running into is that when they click on a <a href="#" class="question">, all of the <div class="answer">'s are displayed.
How can I make it so that only one .answer for it's parent .question is displayed when clicked?
Here is my HTML:
<li class="question">Question 1
<div class="answer"><p>This is answer for question 1</p></div></li>
<li class="question">Question 2
<div class="answer"><p>This is answer for question 2</p></div></li>
Here is my jquery:
<script>
jQuery(document).ready(function ($) {
$('div.answer').hide();
$('li.question').click(function() {
$('div.answer').slideDown('fast');
return false;
});
});
</script>
and the site is: http://topactioninvestments.com/faq/
Thanks!
$('li.question').click(function(e) {
$(this).find('div.answer').slideToggle('fast');
e.preventDefault();
});
Give every answer element an unique id attribute and add a data-answer attribute to the the the question that references the unique question.
The do the following.
$('li.question').click(function(e) {
$($(this).data("answer")).show();
});
To clarify with the relevant html.
<li class="question" data-answer="#answer-42">...</li>
<div class="answer id="answer-42">....</div>
What you typically want to do is have each unit within a container element. An example would be a div or other tag. Say your HTML looked like this:
<div class="qa">
<div class="question">What is 2+2?</div>
<div class="answer">4</div>
</div>
Then you could do:
$('.question').click(function(event) {
var target = $(event.target);
target
.closest('.qa')
.find('.answer')
.show();
});
Your markup for each question and answer looks like this:
<li>
<a><strong>Why do you not just sell these option contracts?</strong></a>
<div class="answer"><p>This is a test</p></div>
</li>
For this markup, this JavaScript would work:
$('li').on('click', function(event) {
$(this).find('.answer').show();
});
Demo: jsfiddle

Categories