Toggle all except one and then toggle the excepted one? - javascript

I have this Q&A section.
What I want to do is show the clicked one and hide the all others. After that if I click again on the clicked one it will hide like others.
I have done the hide all parts except the 2nd click part.
MARKUP
<h4 class=" question"><span class="glyphicon glyphicon-minus faq_icon"></span><strong>How r u?</strong></h4>
<p class="answer">Fine</p>
<h4 class=" question"><span class="glyphicon glyphicon-minus faq_icon" id=""></span><strong>What r u doing?</strong></h4>
<p class=" answer">nothing.</p>
JQUERY
$(document).ready(function() {
$(".question").click(function() {
$('.answer').not(this).hide();
$(this).next(".answer").toggle();
});
});
Now I need to hide the THIS on 2nd click. How to do that?

Check it
$(".question").click(function() {
$('.answer').hide();
if(!$(this).next(".answer").is(':visible')) {
$(this).next(".answer").show();
}
});

You need to pass the current answer element to not().
this in the click handler is the question element so $('.answer').not(this).hide(); will hide all the answer elements, then calling toggle for the current answer element will always display it instead of toggling it
$(document).ready(function() {
$(".question").click(function() {
var $ans = $(this).next(".answer").toggle();
$('.answer').not($ans).hide();
});
});
.answer {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4 class=" question"><span class="glyphicon glyphicon-minus faq_icon"></span><strong>How r u?</strong></h4>
<p class="answer">Fine</p>
<h4 class=" question"><span class="glyphicon glyphicon-minus faq_icon" id=""></span><strong>What r u doing?</strong></h4>
<p class=" answer">nothing.</p>

try this:
$(".question").click(function() {
if( $(this).is(':visible') ){
$('.answer').not(this).hide();
}else {
$('.answer').hide();
}
$(this).next(".answer").toggle();
});

Related

onChange Button label doesn't hold its style

I have an interesting problem. I have a button that is used for selecting (like a select item). That code is here:
<button class="btn btn-primary dropdown-toggle" style="width: 166%;"
type="button" id="dropdownMenuButton" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<span id="dropdown_button" style="width: 166%;">
<img src="wp-content/themes/directory2/images/closest.png" />
10 Closest Amenities</span>
<span class="caret" style="margin-top: 9px;float: right;"></span>
</button>
Then it uses some jquery to change the text in the button/select like this:
$(document).on('click', '.dropdown_anchor', function(event) {
var index = $(this).data('index');
var title = $(this).data('title');
populate_list(index);
dropdownButtonText(title);
});
Then the dropdownButtonText function is implemented as below:
function dropdownButtonText(text) {
$("#dropdown_button").text(text);
}
The problem is, that the button spans the width it needs to on page load (aka style="width: 166%;") but when the selection happens and its changed, the button then doesn't hold its set width. Meaning for example it goes from 166% to say 87% width.
How can I make it so that the button holds its width when changed?
Thank you for your input and time, it's appreciated.
An example can be seen here:
https://www.trustedlivingcare.com/item/cedarhurst-of-sparta-il/
The Neighborhood & Nearby Amenities area
Starting Position
https://www.screencast.com/t/TiuWZdhYcWc
After Change
https://www.screencast.com/t/goYgVtvrErW5
It is because the width of the button changes when the text has less characters than previous one. you can give the button a specific width in css so it doesn't change when the text change.
#dropdown_button {
width: 100px; // this is an example
}
You can also do min-width to make sure that is the least width the button goes.
#dropdown_button {
min-width: 100px; // this is an example
}
You can try grabbing the elements width before the text change:
$(document).on('click', '.dropdown_anchor', function(event) {
var index = $(this).data('index');
var title = $(this).data('title');
var width = $(this).outerWidth();
populate_list(index);
dropdownButtonText(title, width);
});
and then apply that width in the new function.
function dropdownButtonText(text, width) {
$("#dropdown_button").css("width", width).text(text);
}
The button will need to be display inline-block, though.
try this in your css file
.btn-primary {
min-width: 500px;
}
Below what I have tried.
<div class="dropdown">
<button id="btnTest" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" style="width: 80%;">Dropdown Example
<span class="caret"></span></button>
<ul id="demolist" class="dropdown-menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
</div>
<script type="text/javascript">
$('#btnTest').click(function() {
console.log("Test");
});
$('#demolist li').on('click', function(){
var selectedText = $(this).text();
console.log(selectedText);
$("#btnTest").html(selectedText+' <span class="caret"></span></button>');
});
</script>
Also, consult the demonstration at using Bootstrap 3 Dropdown toggle button

trigger method not working in jQuery

I have a page which has about 100 divs like this.
<div id="ListItem_JBEEB_847">
<span title="-HD">
<span>F</span>
<span style="pointer-events: none;">-HD</span>
</span>
</div>
The IDs have different number. And I am trying to click on this div/or the spam via jQuery one by one. So, I made a loop like this..
$('div').each(function(){
div = $(this).attr('id');
if(div){
if(div.includes('ListItem_JBEEB')){
get_div = jQuery("#" + div).trigger('click');
}
}
});
The above code should work, but for some reason it doesn't. It works with styling and all other DOM manipulations like changing color of the text via
jQuery("#" + div).css({'color': 'red'}) so the loop is ok, I also tried to target the span using jQuery("#" + div).find('span').trigger('click') but nothing happens.
btw: on the website, if you click any of the divs, the instantly show you more information, but with the this nothing changes, I am not sure if the trigger click is even working
Here is the updated version of your code. Instead of jQuery("#" + div).trigger('click'), you can use $(this).trigger('click') and separately, define what should happen on the click event.
$(document).ready(function() {
$('div').each(function() {
div = $(this).attr('id');
if (div && div.includes('ListItem_JBEEB')) {
$(this).trigger('click');
}
});
});
$('div').on('click', function() {
console.log($(this).attr('id') + ' got clicked..');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ListItem_JBEEB_847">
<span title="-HD">
<span>F</span>
<span style="pointer-events: none;">-HD</span>
</span>
</div>
<div id="ListItem_JBEEB_848">
<span title="-HD">
<span>F</span>
<span style="pointer-events: none;">-HD-1</span>
</span>
</div>
<div id="ListItem_JBEEB_849">
<span title="-HD">
<span>F</span>
<span style="pointer-events: none;">-HD-2</span>
</span>
</div>
You have to initialize the click event before calling it, You have to check that the particular click event is already initialized before calling it not not else it won't perform the click event.
For Example
// THIS WILL WORK
$(document).ready(function() {
jQuery("#ListItem_JBEEB_847").click(function(){
alert('a');
});
$('div').each(function(){
div = $(this).attr('id');
if(div){
if(div.includes('ListItem_JBEEB')){
jQuery("#" + div).click();
}
}
});
});
// THIS WILL NOT WORK
$(document).ready(function() {
$('div').each(function(){
div = $(this).attr('id');
if(div){
if(div.includes('ListItem_JBEEB')){
jQuery("#" + div).click();
}
}
});
jQuery("#ListItem_JBEEB_847").click(function(){
alert('a');
});
});

Jquery set the initial value

Hope you can help me. How do I set the initial value of an element in Jquery/Javascript?
To explain my problem I've the following snippet.
My snippet works as I want, but only after "onclick". When I load the page, it won't get the right value. In this case I want want to when I click "show Monthly" to appear 80€ and when I click show Annual to appear 800€. But it only works after I click, not when I load the page.
Thanks
//Trying to set the initial value
$(document).ready(function() {
$(".teste").ready(function() {
var initialVal = $(this).html();
if(initialVal !== "Show Monthly"){
jQuery(".amountMonth").hide();
jQuery(".amountAnnual").show();
}else{
jQuery(".amountMonth").show();
jQuery(".amountAnnual").hide();
}
});
});
//OnClick is working right
$(document).ready(function() {
$(".teste").click(function(e) {
e.preventDefault();
var initialVal = $(this).html();
if(initialVal !== "Show Monthly"){
$(".showAnnualMonthly a").text("Show Monthly");
$(".perYearMonth").text("per year");
jQuery(".monthlyOptions").hide();
$("#arrowUpDown").removeClass("icon-up-arrow-button");
$("#arrowUpDown").addClass("icon-down-arrow-button");
jQuery(".amountMonth").hide();
jQuery(".amountAnnual").show();
}
else if (initialVal !== "Show Annual"){
$(".showAnnualMonthly a").text("Show Annual");
$(".perYearMonth").text("per month");
jQuery(".monthlyOptions").show();
$("#arrowUpDown").removeClass("icon-down-arrow-button");
$("#arrowUpDown").addClass("icon-up-arrow-button");
jQuery(".amountMonth").show();
jQuery(".amountAnnual").hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="amount amountAnnual" style="display:none">Annual --> 600€</p>
<p class="amount amountMonth" style="dispay:none">Monthly--> 60€</p>
<p class="showAnnualMonthly" id="showMonthlyOpt">
<a href="" style="border:0; text-decoration:none;" class="teste">Show Monthly
<div class="row">
<span id="arrowUpDown" class="icon-down-arrow-button changeArrow" style="color: rgba(0, 161, 204, 1); margin-bottom:30px; font-size:36px;"></span>
</div>
</a>
</p>
Just run the code that shows and hides the p elements inside $(document).ready() but outside the click handler. There is no need for the first $(document).ready() function; you can combine them into one.

JS slidetoggle on UL Tree

When i click on second item with slideToggle, first item close.
$(function() {
$('.toggleSitemap').find('ul').css('display','none')
$('.toggleSitemap').click(function(){
$(this).parent().find('ul').slideToggle('slow');
});
});
http://jsfiddle.net/qHZsZ/2/
I dont know how much will this help you. I also needed to implement accordian(toggle) in my MVC project once, and I used something like this:
View.aspx:
<div class='toggle' style="float: left">
<div style="float: left;clear:both;">
<br />
<span class="ulGroup" jqattr="<%:Group.Key %>" style="font-weight: bold;font-color: black;cursor: pointer"><img src="<%: Url.Content("~/Images/imageplus.gif")%>"/>
<%:Group.Key%></span>
</div>
<div class="togglebox" style="clear:both;" >
<!-- Write contents as you wish -->
<!-- as
<ul> test
<li>Test1></li>
<li>Test2></li>
<li>Test3></li>
</ul>
.
.
.
-->
</div>
</div>
And called a design.js (javascript file) as :
$(document).ready(function () {
//Hide the tooglebox when page load
$(".togglebox").hide();
//slide up and down when click over span
$(".ulGroup").click(function () {
var valueText = $(this).attr('jqAttr');
// slide toggle effect set to slow you can set it to fast too.
var x = $(this).parent().next(".togglebox").css("display");
if (x == "block") {
$(this).text('');
$(this).append($('<img src="../../Images/imageplus.gif"/>'))
$(this).append(' ' + valueText);
}
else {
$(this).text('');
$(this).append($('<img src="../../Images/imageplus.gif"/>'))
$(this).append(' ' + valueText);
}
$(this).parent().next(".togglebox").slideToggle("fast");
return true;
});
});
You're pretty close. I think the key ingredient you're missing is to prevent propagation of the click event.
Also, to make it a little less quirky, you only want the click event to fire if the target's direct parent has the toggleSitemap class.
$(function() {
$('.toggleSitemap').click(function(e){
if ($(e.target).parent().hasClass('toggleSitemap')) {
e.stopPropagation();
$(this).children('ul').slideToggle('slow');
}
});
});
Here's an example: http://jsfiddle.net/DkbNA/2/

Change a icon fonts when clicking on it

This is my html:
<div class="menu">
<span aria-hidden="true" class="btn" data-icon="🔓"></span>
</div>
And when I click on span tag I would like data-icon will change: data-icon="🔓
$icon = $(event.currentTarget)
if $icon.attr('data-icon') == '🔓'
$icon.attr('data-icon', "🔒")
else
$icon.attr('data-icon', "🔓")
But although 'data-icon' changed correctly, the screen displays the string 🔓 instead the icon.
This is the solution:
$.parseHTML("🔒")[0].data
So, the complete code:
$icon = $(event.currentTarget)
if $icon.attr('data-icon') == $.parseHTML("🔒")[0].data
$icon.attr('data-icon', $.parseHTML("🔓")[0].data)
else
$icon.attr('data-icon', $.parseHTML("🔒")[0].data)
<div class="menu">
<span aria-hidden="true" class="btn" data-icon="🔓" id="yourspan"></span>
</div>
Using the id of your span
$("#yourspan").on('click',function(){
if($("#yourspan").attr('data-icon')=='🔓'){
$("#yourspan").attr('data-icon','🔒');
}
else{
$("#yourspan").attr('data-icon','🔓')
}
});
Improving answer by Deepu, check this
$('body').on('click', '#yourspan', function(){
if($(this).attr('data-icon')=='🔓'){
$(this).attr('data-icon','🔒');
}
else{
$(this).attr('data-icon','🔓');
}
});

Categories

Resources