I have a basic accordion in jQuery. When the user clicks the question, the hidden answer shows up. Currently, in order for the answer to disappear, the user has to click another question. I would like that to remain the same but I would also like for the answer to disappear if the same question is clicked again.
var allPanels = jQuery('.faq-single .faq-answer-section').hide();
jQuery('.faq-question').click(function() {
var nextAnswer = jQuery(this).next();
jQuery(allPanels).not(nextAnswer).slideUp();
nextAnswer.slideDown();
jQuery(this).find('.faq-answer').show();
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="faq-single">
<span class="faq-question"><span class="faq-question-icon"></span>Question?</span>
<span style="display:none;" class="faq-answer-section"><span class="faq-answer-icon"></span><span class="faq-answer">FAQ answer</span></span>
</div>
<div class="faq-single">
<span class="faq-question"><span class="faq-question-icon"></span>Question?</span>
<span style="display:none;" class="faq-answer-section"><span class="faq-answer-icon"></span><span class="faq-answer">FAQ answer</span></span>
</div>
<div class="faq-single">
<span class="faq-question"><span class="faq-question-icon"></span>Question?</span>
<span style="display:none;" class="faq-answer-section"><span class="faq-answer-icon"></span><span class="faq-answer">FAQ answer</span></span>
</div>
var allPanels = jQuery('.faq-single .faq-answer-section').hide();
jQuery('.faq-question').click(function() {
var nextAnswer = jQuery(this).next();
jQuery(allPanels).not(nextAnswer).slideUp();
if (nextAnswer.is(":visible")) { nextAnswer.hide(); } else { nextAnswer.slideDown(); }
return false;
});
This works for me:
var allPanels = jQuery('.faq-single .faq-answer-section').hide();
jQuery('.faq-question').click(function() {
var nextAnswer = jQuery(this).next();
if(jQuery(this).next().is(':visible')){
jQuery(this).next().slideUp();
}else{
jQuery(allPanels).not(nextAnswer).slideUp();
nextAnswer.slideDown();
}
return false;
});
This is working fine.
var allPanels = $('.faq-single .faq-answer-section').hide();
$('.faq-single').click(function() {
if($(this).children('.faq-answer-section').is(':visible')){
$('.faq-single .faq-answer-section').hide();
}else{
$('.faq-single .faq-answer-section').hide();
$(this).children('.faq-answer-section').show("slide");
}
});
Related
I need some help.. the idea behind this is like a simple toggle button that can hide the object and replacing the empty area with ****.
I was thinking it was more like in a Password form input where you can hide password by clicking the Eye icon. However, I needed something that are not required input form, something that is just simple DIV
function toggler(divId) {
$("#" + divId).toggle();
.css('content', 'sadas');
}
.hidden {
display:none;
}
this is a test
<div id="myContent" class='hidden'>
<div>this is a test #1 </div>
</div>
I can hide the DIV but leaving the empty area, how can I replace this empty area with ***** ??
example:
My balance is $200 [hide]
My balance is **** [show]
https://jsfiddle.net/qobgfLh6/
I have written a fiddle.
There are some points that can be better managed.
But I think you are looking for something like that.
The idea is to add another div with the **** placeholder and use toggleClass() function of jQuery.
$("#" + divId).toggleClass('hidden');
$("#myPlaceholder").toggleClass('hidden');
https://jsfiddle.net/qze8fydv/
Try to use something like this.
$(document).ready(function () {
function handle(input, toggler) {
var inputValue = ""
var shouldShowAsterisks = false
input.change(function () {
inputValue = $(this).val()
})
toggler.click(function () {
shouldShowAsterisks = !shouldShowAsterisks
shouldShowAsterisks
? input.val("*".repeat(inputValue.length))
: input.val(inputValue)
input.prop("disabled", shouldShowAsterisks)
})
}
handle($(".enter"), $(".toggler"))
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="enter" />
<button class="toggler">Hide</button>
function toggleElementMask(element){
//Regex to find *
let reg = /^\*+$/g;
//If all * we are masked
let isMasked = element.innerText.match(reg);
if(!isMasked) {
//Store the original text
element.dataset.original = element.innerText;
//Replace the contente with the same amount of *
element.innerText = "*".repeat(element.innerText.length);
}else{
//Restore the text
element.innerText = element.dataset.original;
}
}
//Mask on page load
$(".masked").each(function(){
toggleElementMask(this);
});
//Click event handler
$(".toggleMask").on("click", function(e){
e.preventDefault();
toggleElementMask($($(this).attr("href"))[0]);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
this is a test
<div id="myContent" class='masked'>
<div>this is a test #1 </div>
</div>
this is a test
<div id="myContent2" class='masked'>
<div>Another one</div>
</div>
this is a test
<div id="myContent3" class='masked'>
<div>one with <span>a</span> span</div>
</div>
I have the following button:
<button class="btn actionButtonIcon" id="DashboardEdit" data-bind="click: changeButtonText">
<figure>
<img src="../../../Images/NotesPink.png" />
<figcaption data-bind="text: $data.ProcurementbuttonText() ? 'Save': 'Edit'"></figcaption>
</figure>
</button>
I want to only show it in this specific url
http://localhost:5595/#scorecard/ec5aa8ed-2798-4e71-b13d-f3e525994538/dashboard/PrefDashBoard
Bearing in mind that ec5aa8ed-2798-4e71-b13d-f3e525994538 is an id, thats always changing but i want it to show with all ids as well for example the button should show here as well
http://localhost:5595/#scorecard/2356789-234-234d-g3g3-reg456452/dashboard/PrefDashBoard
and i want to hide it where this isnt the url.
I tried the following code but it doesnt seem to work:
<script>
$(document).ready(function(){
if(window.location.pathname.match(/\/dashboard/PrefDashBoard))
{
$(".DashboardEdit").show();
}
else
{
$(".DashboardEdit").hide();
}
});
</script>
Here is the JS of that button:
self.ProcurementbuttonText = ko.observable(false);
self.changeButtonText = function(){
self.ProcurementbuttonText(!self.ProcurementbuttonText())
if (!self.ProcurementbuttonText()){
var data = {
'ScorecardId':ko.observable(localStorage.getItem('scorecardId'))(),
'DashboardConfig':ko.observable(localStorage.getItem('ElementDataWidget'))()
};
PreferentialProcurementDashboardApi.Save(data);
}
}
self.DashboardEdit = ko.computed({
read: function () {
var text = 'Customise your dashboard';
if (!self.EnableScorecardFeatures()) {
text = 'This feature is currently unavailable for this scorecard type';
} else {
if (!self.HasDocumentsRole()) {
text = 'You do not have sufficient rights to access the Supporting Documents view';
}
}
return text;
}
});
i think you can take advantage of the visible binding to show/hide the button based on your criteria
function PageViewModel() {
var self = this;
self.buttonVisible = ko.observable(true);
self.changeButtonText = function() {
self.ProcurementbuttonText(!self.ProcurementbuttonText());
}
self.ProcurementbuttonText = ko.observable(false);
self.buttonText = ko.pureComputed(function() {
return self.ProcurementbuttonText() ? "Save" : "Edit";
});
self.isButtonVisible = ko.computed(function() {
//do some your logic here. just need to return a true or false value;
return self.buttonVisible();
});
self.labelText = ko.pureComputed(function() {
var messageStart = "click to ";
var state = self.buttonVisible() ? 'hide' : 'show';
var messageEnd = " button";
return messageStart + state + messageEnd;
});
}
ko.applyBindings(new PageViewModel());
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<button class="btn actionButtonIcon" id="DashboardEdit" data-bind="click: changeButtonText, visible: isButtonVisible, text: buttonText">
Click me.
</button>
<br/>
<br/>
<label><span data-bind="text: labelText " ></span>
<input type="checkbox" data-bind="checked: buttonVisible" />
</label>
If you have Durandal's router plugin installed and configured, you can also use the activeInstruction() observable to get info about the current route. You can then use this in your computed to check if the current fragment matches your page route.
More info here: http://durandaljs.com/documentation/api#class/Router/property/activeInstruction
I have problem with my code.
I have products on my website, each product has his own <a><h1>CODE</h1></a> and I need to take this CODE and paste it before an image. I need to copy element with has class="loop1" and paste it into another element with class="lop1" and then take another element with class="loop2" and paste into element with class="lop2" and so on..
I made class with same numbers for easier copying, but it doesnt work. Can sombody help me?
This is my code:
$('#loop').addClass(function(i) {
return 'lop'+(i+1);
});
$('.p-name').addClass(function(i) {
return 'loop'+(i+1);
});
function doForm() {
var numb = ["1","2","3","4","5","6","7","8","9","10","11","13","14"];
for (var i=0;i<numb.length;i++) {
number = numb[i];
selector = '.loop' + number;
if ($(selector).length != 0) {
val = $(selector).html();
$('lop' + number).html(val);
}
}
}
doForm();
Related html:
<div class="columns">
<div id="loop" class="lop1"></div>
<div class="p-image">
<img src="https://" width="290" height="218">
</div>
<div class="p-info">
<span itemprop="name">PRODUCT</span>
</div>
<div>
So I need to take from "p-info > a" and paste it into div "lop1". Depends on number in class copy and paste HTML into div with same number.
Change $('lop' + radek).html(val); to $('.lop' + number).html(val);
Notice the . at the beginning of lop, it will create a selector to fetch element based on the class.
$('#loop').addClass(function(i) {
return 'lop'+(i+1);
});
$('.p-name').addClass(function(i) {
return 'loop'+(i+1);
});
function doForm() {
var numb = ["1","2","3","4","5","6","7","8","9","10","11","13","14"];
for (var i=0;i<numb.length;i++) {
var number = numb[i];
var selector = '.loop' + number;
if ($(selector).length != 0) {
var val = $(selector).html();
$('.lop' + number).html(val);
}
}
}
doForm();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="columns">
<div id="loop" class="lop1"></div>
<div class="p-image">
<img src="https://" width="290" height="218">
</div>
<div class="p-info">
<span itemprop="name">PRODUCT</span>
</div>
<div>
design
<div class="align_center">
<div class="btn EmployeeloginBtn" **onclick="new Employee().register()**">REGISTER</div>
</div>
Employee.js:
var Employee = function() {
var self = this;
self.register = function ()
{
var mobile = $("#mobile").val();
var regSeven = /^7[0-9].*$/
var regEight = /^8[0-9].*$/
if($("#empId").val() =='')
{
alert("invalid emp id");
return false;
}
if(mobile =='')
{
alert("invalid mob no");
return false;
}
}
};
When I click the button onclick is not working its not triggering to Employee.js
I'm not completely sure, but it seems to me that in such an application it does not run the JavaScript code placed in the HTML file.
Here the new Employee statement().Register() is ignored.
Try to manage the button click directly in your JS file.
document.getElementById("Button1").onclick = function() {new Employee().register();};
and
<div id="Button1" class="btn EmployeeloginBtn">REGISTER</div>
Have you tried to change the onclick attribute?
Test different ways...
<div class="btn EmployeeloginBtn" onclick="new Employee().register()">REGISTER</div>
Im not sure if there is a framework or something else that you need the '*'
Well, i have a $.get method to get data from other page and load it to a div. But even with the .each, only one div is affected.
Here is the HTML:
$(document).ready(function() {
$(".post1").each(function() {
var categlink = $(this).find(".post-area > a").attr("href");
var pAvatar = $(this).find("img.postavatar");
var pTTitle = $(this).find(".topictitle");
var pContent = $(this).find(".postcontent");
var pType = $(this).find("img.post-type");
var pOwnerlink = $(this).find(".p-ownerlink");
var pTime = $(this).find(".post-time");
$.get(categlink, function(data) {
var tLink = $(data).find(".main-content:nth-child(5) tr:first-child a.topictitle").attr("href");
$.get(tLink, function(data) {
var fAvatar = $(data).find(".post:first-child .user-basic-info > a > img").attr("src");
pAvatar.attr("src", fAvatar);
var fTopicTitle = $(data).find(".paged-head.clearfix > h1").text();
pTTitle.text(fTopicTitle);
var fTContent = $(data).find(".post:first-child .entry-content > div:first-child").html();
pContent.html(fTContent);
var fType = $(data).find(".post:first-child .posthead > h2 > img").attr("src");
pType.attr("src", fType);
var fOwner = $(data).find(".post:first-child h4.username > a > span > strong").text();
pOwnerlink.text(fOwner);
var fOwnerlink = $(data).find(".post:first-child h4.username > a").attr("href");
pOwnerlink.attr("href", fOwnerlink);
var fTTime = $(data).find(".post:first-child .posttime").text();
pTime.text(fTTime);
$(".postcontent img").each(function() {
if ($(this).height() > 70) {
$(this).addClass("imgresize");
$('.main-forum').isotope({
itemSelector: '.c-post',
percentPosition: true,
});
}
});
});
});
});
});
<div class="c-post post1">
<div class="post-info">
<img class="postavatar">
<div class="topictitle"></div>
</div>
<div class="postcontent"></div>
<div class="post-info2">
<img class="post-type">
<div class="post-owner">Por
<a class="p-ownerlink"></a>
</div>
<div class="post-time"></div>
<div class="post-area">{catrow.forumrow.FORUM_NAME}
</div>
</div>
</div>
<div class="c-post post2">
<div class="post-info">
<img class="postavatar">
<div class="topictitle"></div>
</div>
<div class="postcontent"></div>
<div class="post-info2">
<img class="post-type">
<div class="post-owner">Por
<a class="p-ownerlink"></a>
</div>
<div class="post-time"></div>
<div class="post-area">{catrow.forumrow.FORUM_NAME}
</div>
</div>
</div>
<div class="c-post post3">
<div class="post-info">
<img class="postavatar">
<div class="topictitle"></div>
</div>
<div class="postcontent"></div>
<div class="post-info2">
<img class="post-type">
<div class="post-owner">Por
<a class="p-ownerlink"></a>
</div>
<div class="post-time"></div>
<div class="post-area">{catrow.forumrow.FORUM_NAME}
</div>
</div>
</div>
Actually, my page has various .post1 divs, but only one of all is affected.
Thanks.
EDIT
So, the problem is: we cant use a $.get inside other $.get. The thing is: every .post1 has a link, that i call tLink. After getting tLink of the .post1, i need to run another $.get method using the tLink value to get info from other page. I've tried that, no sucess:
function loadpostinfo() {
$(".post1").each(function () {
var categlink = $(this).find(".post-area > a").attr("href");
var pAvatar = $(this).find("img.postavatar");
var pTTitle = $(this).find(".topictitle");
var pContent = $(this).find(".postcontent");
var pType = $(this).find("img.post-type");
var pOwnerlink = $(this).find(".p-ownerlink");
var pTime = $(this).find(".post-time");
$.get(categlink, function (data) {
var tLink = $(data).find(".main-content:nth-child(5) tr:first-child a.topictitle").attr("href");
});
if (typeof tLink === "undefined") {
} else {
console.log("checked if tLink is valid");
$.get(tLink, function (data) {
console.log("running tLink get method");
var fAvatar = $(data).find(".post:first-child .user-basic-info > a > img").attr("src");
pAvatar.attr("src", fAvatar);
var fTopicTitle = $(data).find(".paged-head.clearfix > h1").text();
pTTitle.text(fTopicTitle);
var fType = $(data).find(".post:first-child .posthead > h2 > img").attr("src");
pType.attr("src", fType);
var fOwner = $(data).find(".post:first-child h4.username > a > span > strong").text();
pOwnerlink.text(fOwner);
var fOwnerlink = $(data).find(".post:first-child h4.username > a").attr("href");
pOwnerlink.attr("href", fOwnerlink);
var fTTime = $(data).find(".post:first-child .posttime").text();
pTime.text(fTTime);
var fTContent = $(data).find(".post:first-child .entry-content > div:first-child").html();
pContent.html(fTContent);
setTimeout(alignposts, 5000);
});
}
});
}
$(document).ready(function () {
loadpostinfo();
});
How do i proceed?
OH MY GOSH, i'm the dumbest man in Earth!
The problem: only the first .post1 of page has content loaded. Each of then have a categlink url value, wich is used to get the TLink url value inside the categlink page. Then i use the TLink with $.get to load content inside this .post1 div.
The fix: only the categlink page from the first .post1 div actually has a TLink inside to use. The other ones was having no content matching my filters. So, this mess was all about data on server, and not JQuery or HTML.
Sorry for wasting your time, guys!
It's all fixed now, thanks!