JQuery div display, collapse - javascript

I am not a jquery specialist but I have managed to make this script working on my website:
<script>
$(document).ready(function() {
$('#open_#div_hidden_1').click(function() {
if ($('#div_hidden_1').is(':hidden')) {
$('#div_hidden_1').show(500);
$('#div_hidden_1').hide(500);
} else {
$('#div_hidden_1').hide(500);
}
});
});
</script>
Basicly it displays and collapses a div (distinguished by id), I have many divs on my wbesite that are displayed this way(its an inline code, for each div separate code) What I would like to do with it is to close all other divs (e.g. from the same class) when I open another one. Could please someone help me to modify this code so that it will collapse all other divs form the same class?

If you have multiple DIVs and class like below,
<div class="divClass">A</div>
<div class="divClass">B</div>
<div class="divClass">C</div>
then, you need to use like,
$(".divClass").click(function(){
$(".divClass").hide(500); //hiding all the element with divClass
$(this).show(500); // showing up the clicked element.
});

This might be able to you
Reference
Just a part of code
$(".header").click(function () {
$(".header").not(this).text('Expand').next().slideUp();
$header = $(this);
//getting the next element
$content = $header.next();
//open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
$content.slideToggle(500, function () {
//execute this after slideToggle is done
//change text of header based on visibility of content div
$header.text(function () {
//change text based on condition
return $content.is(":visible") ? "Collapse" : "Expand";
});
});
});

Related

Remove Class when current toggle is clicked

The title is a bit of a tongue twister. A brief description of the fiddle, is that it's a toggle style accordion where the toggle state changes color when one of the divs is toggled. I've got it working to where if another div is toggled it will close that previous div and open the new div while changing the toggle state.
The issue I am running into is if a user wants to close the current toggle without clicking a different div it will close the current toggle but not change the toggle state back to it's original state. I am currently using this and have tried multiple things including if the container 'is: visible' or hasClass then to remove the toggle class, but nothing seems to work. I've also tried a different slideToggle function, but of course that applied it to the toggled element I've found.
Fiddle: http://jsfiddle.net/NFTFw/1256/
What I am trying to do?
I want the current toggle class to change back to its original state if the user clicks the current toggled div or clicks another div. So essentially I want the user to have either option.
CODE:
$(document).ready(function () {
$('.column').each(function (index) {
$(this).delay(750 * index).fadeIn(1500);
});
$('.column').hide();
$('.body').hide();
$('.column').each(function () {
var $toggle = $(this);
$('.toggle', $toggle).click(function () {
$(".toggle").removeClass("toggle-d");
$(this).addClass('toggle-d');
$body = $('.body', $toggle);
$body.slideToggle();
$('.body').not($body).hide();
});
});
});
Check to see if the thing that you're clicking already has the class. If so, remove it, if not, add it. I suspect the problem you were having with hasClass() is that you were attempting to check the wrong this.
Oooh I did a bad thing and didn't remove the class when a new div was clicked. I've fixed that and updated the jsfiddle
jsfiddle
js:
$(document).ready(function () {
$('.column').each(function (index) {
$(this).delay(750 * index).fadeIn(1500);
});
$('.column').hide();
var width = $(window).width();
if (width <= 600) {
$('.body').hide();
$('.column').each(function () {
var $toggle = $(this);
$('.toggle', $toggle).click(function () {
if($(this).hasClass('toggle-d')){
$(this).removeClass("toggle-d");
}
else{
$('.toggle').removeClass('toggle-d');
$(this).addClass('toggle-d');
}
$body = $('.body', $toggle);
$body.slideToggle();
$('.body').not($body).hide();
});
});
}
});
What i would suggest is to pass the element itself in the function
in the index.html Do this
<a class = 'classname' onclick = toggle(this)>
Your Content Here
</a>
After that in the script.js
what i am saying is in javascript, i believe you can easily convert it to jquery
function toggle(value){
if(value.className == 'the predefined value'){
value.className = value.className + ' Your new class addition'
// remember there should be a space if you are adding an additional class to the present class, else directly change the classname
}
else{
value.className = 'the predefined value'
}}
this will toggle your classname whenever the element is clicked

Hide text after br tag

I wondering is there anyway to hide text after a br tag . I've a content like this
<div class="lyric">
Track List:
<br>1/a
<br>2/b
<br>3/c
<br>4/d
<br>5/e
<br>6/f
<br>
</div>
I only want display 3 track ,hide another track , when people click button show more it will show all the track . EX:
<div class="lyric">
Track List:
<br>1/a
<br>2/b
<br>3/c
</div>
Before my content look like this :
<div class="lyric">
Track List:
<div>a</div>
<div>b</div>
<div>c</div>
<div>d</div>
<div>e</div>
<div>f</div>
</div>
So my code look like this :
if ( $('.lyric div').length > 5 ) {
$('.lyric div:gt(5)').hide();
$('.show-more').removeClass('hidden');
}
Now my content changed look like first exmaple , so i don't know how to hide it
Basically you can't without restructuring the DOM a little as you can't style out the remaining text blocks without a parent element.
jQuery makes it easy to change the DOM however :)
JSFiddle: http://jsfiddle.net/TrueBlueAussie/pc1k9Lt0/4/
// Wrap all text elements in divs
$('.lyric').each(function () {
var $lyric = $(this);
var contents = $(this).contents();
contents.each(function () {
$lyric.append($('<div>').html(this));
});
// Remove all the br elements
$('br', $lyric).parent().remove();
});
// Hide what you do not want visible
$('.lyric div:gt(2)').hide();
// Toggle visibility on click
$('#show').click(function () {
$('.lyric div:gt(2)').toggle();
});
You can do the same thing with UL and LI if you want (just insert a UL as the parent and use LI instead of DIV in my example)
e.g. http://jsfiddle.net/TrueBlueAussie/pc1k9Lt0/8/
Note: I needed to ignore any blank text block - i.e. the last item :)
// Wrap all text elements in LIs
$('.lyric').each(function () {
var $lyric = $(this);
var contents = $(this).contents();
contents.each(function () {
var $li = $('<li>').html(this);
if ($.trim($li.text()) != ""){
$lyric.append($li);
}
});
// Remove all the br elements
$('br', $lyric).parent().remove();
$lyric.children().wrapAll('<ul>');
});
// Hide what you do not want visible
$('.lyric li:gt(2)').hide();
// Toggle visibility on click
$('#show').click(function () {
$('.lyric li:gt(2)').toggle();
});

Change Toggle(); from Display:none to Visibility:hidden

This code is working successfully on the project that I am working on. The problem with this is that the elements that this code affects are positioned absolutely. When .field-name-field-pin-point it clicked the element .group dealer is hidden, but the .field-name-field-pin-point moves off of the page. Ideally, I would like the visibility to be set at none upon page load, but it would probably be easier to do that part in CSS. Here is what I am currently using:
jQuery(document).ready(function () {
jQuery('.node-202 .field-name-field-pin-point').click(function() {
jQuery(this).siblings('.group-dealer').toggle();
});
});
There will be more nodes that will be positioned differently so the full class name I provided is necessary. The markup (generally speaking) is as follows:
<div class="node-202">
<div class="group-dealer">...</div>
<div class="field-name-field-pin-point">...</div>
</div>
I am basically creating points on a map that when clicked, bring up a small window with more information about that location.
Here is a reference to my last post if you are looking for more information: Toggle Class Visibility by Clicking on another Class
I suggest your best approach is to add a css rule and just toggle a class on the elements
CSS
.group-dealer.hidden{ visibility:hidden}
JS
jQuery('.node-202 .field-name-field-pin-point').click(function() {
jQuery(this).siblings('.group-dealer').addClass('hidden');/* use toggleClass if more appropriate*/
})
Just toggle the visibility then
jQuery(document).ready(function () {
jQuery('.node-202 .field-name-field-pin-point').click(function() {
jQuery(this).siblings('.group-dealer').css('visibility', function(_,vis) {
return vis == 'hidden' ? 'visible' : 'hidden';
});
});
});
Try:
$('.node-202 .field-name-field-pin-point').click(function () {
if ($(this).siblings().css('visibility') == 'visible') {
$(this).siblings().css('visibility', 'hidden');
} else {
$(this).siblings().css('visibility', 'visible');
}
});
DEMO here.

Jquery show/hide div- minor tweak

I have the following javascript that shows or hides a div when a link is clicked:
<script type="text/javascript">
$(document).ready(function(){
$('.show_hide').showHide({
speed: 500, // speed you want the toggle to happen
changeText: 0, // if you dont want the button text to change, set this to 0
showText: 'View',// the button text to show when a div is closed
hideText: 'Close' // the button text to show when a div is open
});
});
(function ($) {
$.fn.showHide = function (options) {
//default vars for the plugin
var defaults = {
speed: 1000,
easing: '',
changeText: 0,
showText: 'Show',
hideText: 'Hide',
};
var options = $.extend(defaults, options);
$(this).click(function () {
// this var stores which button you've clicked
var toggleClick = $(this);
// this reads the rel attribute of the button to determine which div id to toggle
var toggleDiv = $(this).attr('rel');
// here we toggle show/hide the correct div at the right speed and using which easing effect
$(toggleDiv).slideToggle(options.speed, options.easing, function() {
// this only fires once the animation is completed
if(options.changeText==1){
$(toggleDiv).is(":visible") ? toggleClick.text(options.hideText) : toggleClick.text(options.showText);
}
});
return false;
});
};
})(jQuery);
</script>
The problem is, I have two such divs, but I only want one to be displayed at a time. So, if someone clicks on the link to display div 2, and div 1 is already displayed, it should hide itself first before displaying div2.
Relevant HTML:
<div class="button">FAQs</div>
<div class="button">Contact</div>
<div id="faq" class="faq">FAQs here </div>
<div id="contact" class="faq">Contact form here </div>
I don't have any experience with JS/Jquery, but I tried adding this code, which didn't work:
var otherDiv;
if ($(this).attr('rel') == 'contact')
otherDiv = 'faq';
else
otherDiv = 'contact';
if ($(otherDiv).is(":visible"))
$(otherDiv).slideToggle(options.speed);
Most people use CSS classes as a place to store 'metadata'. When a div becomes visible, add a class to it like "toggledVisible" or whatever. When a new toggle is clicked, find all instances of "toggledVisible", hide them, and remove that class.
Alternatively, you always keep track of some sort of "currentlyVisible" object and toggle it.
Maybe jQuery ui accordion is an alternative?
HTML:
<div class="accordion">
<h3>FAQs</h3>
<div id="faq" class="faq">FAQs here</div>
<h3>Contact</h3>
<div id="contact" class="faq">Contact form here</div>
</div>
JS:
jQuery(document).ready(function() {
jQuery(".accordion").accordion();
});
Also see my jsfiddle.
=== UPDATE ===
JS:
jQuery(document).ready(function() {
jQuery(".accordion").accordion({
autoHeight: false
});
});
Also see my updated jsfiddle.
Try to add this row in your click() function
$('.faq').not(this).hide();
This will hide all shown divs except the one you clicked.

Using location.hash to activate jquery toggle/slideToggle

I have a list of a list that uses jquery toggle and slideToggle so that when items are clicked on, explanatory text slides out and the class changes on the h3. The html for the items looks like:
<li><h3>What do I know about javascript?</h3>
<div class="check_list_wrap feature1">Not a lot, apparently.</div>
</li>
I included the jquery files and then write this in the header:
<script type="text/javascript">
$(function() {
$("#listfeatures h3 a").toggle(function(){
$(this).addClass("check_list_selected");
}, function () {
$(this).removeClass("check_list_selected");
});
$("#listfeatures h3 a").click(function() {
$("."+this.id).slideToggle('fast');
return false;
});
});
</script>
This makes it so that if a link is clicked on, it will toggle the class change of the h3, the display:block/display:inline and the sliding out of the div. It works fine.
BUT, now I want it so that with a url like index.php#feature1, the toggling for that list item will be activated as if it'd been clicked on. I know I need to use location.hash but I'm not sure how to do that. Where should I start?
location.hash contains everything in the URL including and after the hash (#) mark. So, if went to index.php#feature1 and wanted the div with id "feature1" to show on load, you could do
$(document).ready(function() {
if(location.hash) {
var id = location.hash.slice(1); //Get rid of the # mark
var elementToShow = $("#" + id); //Save local reference
if(elementToShow.length) { //Check if the element exists
elementToShow.slideToggle('fast'); //Show the element
elementToShow.addClass("check_list_selected"); //Add class to element (the link)
}
}
});

Categories