I created two(2) sections.I want to hide a section by default, with a button under it that says “Show More”.
Something like this--- (https://www.livermoretreeremoval.com/tree-service-ulmar) under the "Ulmar Tree Services Top Sights" section.
If the button is clicked, the hidden Section should appear, and the button Text should change to “Show Less”.
If the Button is clicked again, the visible Section should become hidden again, and the Button Text should say “Show More”.
So when hidden, the button says “Show More”, and when visible the button says “Show Less”.
Here’s my JavaScript below:
`
function toggleBlock() {
// get the block
var myBlock = document.getElementById(‘service-area-two’);
// get the current value of the block’s display property
var displaySetting = myBlock.style.display;
// also get the block button, so we can change what it says
var blockButton = document.getElementById(‘Show More’);
// now toggle the block and the button text, depending on current state
if (displaySetting == ‘block’) {
// block is visible. hide it
myBlock.style.display = ‘none’;
// change button text
blockButton.innerHTML = ‘Show Less’;
}
else {
// block is hidden. show it
myBlock.style.display = ‘block’;
// change button text
blockButton.innerHTML = ‘Show More’;
}
}
`
The Section ID: service-area-two
The Button Name is: ToggleButton
I know I’m doing a lot of things wrong.
How can I get this button to work?
So as for the button, the show more and show less is not working is what I understood. I think the mistake here is innerHTML. innerHTML means the actual HTML inside the block like for example:
button.innerHTML = '<img src="---'">'
Finally, change innerHTML to innerText.
Use the hidden attribute.
So:
<div hidden id="service-area-two">
// content
</div>
<button id="Show More" onclick="toggleBlock()">Show more</button>
And the JavaScript logic like this:
function toggleBlock() {
var myBlock = document.getElementById("service-area-two");
var blockButton = document.getElementById("Show More");
if (myBlock.hidden) {
blockButton.innerHTML = "Show Less";
myBlock.hidden = false;
} else {
blockButton.innerHTML = "Show More";
myBlock.hidden = true;
}
}
Related
Good afternoon, I have a script that searches for divs by content and changes it, the script is executed when I click on the button, after the click they are rendered or deleted, but if I click on the button, and the content of the div of the last button will match the content of the next button of the div of the past the buttons will not disappear, and because of this, the script will repeatedly try to change the contents of the past divs.
I need that when switching to a new button, the script does not touch the divs that were in the previous button. how to implement it please tell me.
My code:
const boxes = Array.from(document.getElementsByClassName("btn-default"));
boxes.forEach((box) => {
box.addEventListener("click", function handleClick(event) {
console.log("box clicked", event);
var textProp = "textContent" in document ? "textContent" : "innerText";
[].slice
.call(document.querySelectorAll("button"), 0)
.forEach(function (aEl) {
if (aEl[textProp].indexOf("All") > -1) {
function convert() {
var pageDivs = document.getElementsByClassName("product__price");
for (i = 0; i < pageDivs.length; i++) {
const exchange = 57;
let sum = document
.getElementsByClassName("product__price")
[i].innerText.replace("EUR", "USD");
sum = sum.split(" ")[0];
sum = sum / exchange;
document.getElementsByClassName("product__price")[i].innerHTML =
sum + " EUR";
}
}
convert();
}
});
});
});
The code scans the buttons by class, and when I click on them, the page content is updated, and the script changes the contents of the divs, and as I said, if the contents of the buttons match, they will remain on the page and the script will try to change them again, I need the script to not changed past divas, if they remained.
I click on this button
<button role="button" class="btn btn-default active" ng-class="{'active': cat.id === Store.categoryId}" ng-click="Store.setCategory(cat.id)">All</button>
After clicking, about 5-10 such divs are created with different numbers
<div class="product__price">
111 USD
</div>
<div class="product__price">
555 USD
</div>
After i click on the button again and several divs are created again, but the old div remain, and some old div disappear, I need my script to not change the divs that remained after the click.
When you click on the button, the divs appear in the DOM, on the next click, some of them disappear, some remain, those that remain should not be changed by the script on the next click.
When I click menu text that should toggle the menuContent the first time, it works as it shows the menuContent which is what is meant to be shown. However, after it shows it does not hide so the display = block does not go back to display = none.
I tried using a show value but it did not work so I used display = block instead in an if statement.
(By the way: menu = button that toggles text and menuContent = text that should be shown or hidden)
This is the JavaScript:
menu.addEventListener('click', menuClick, false);
menuContent.style.display = 'none'
function menuClick() {
menuContent.classList.toggle('show');
if (menuContent.style.display = 'none') {
menuContent.style.display = 'block'
} else {
menuContent.style.display = 'none'
}
}
So the first part of the if statement worked but not the else part.
How do I fix this?
menuContent.style.display = 'none'
should be
menuContent.style.display === 'none'
otherwise you're setting menuContent back to "display: none" again.
Remind '=' and '==='!
menuContent.style.display = 'none' is variable assignment, not a test for equality. You need to use === or == (loose check).
So, you always end up in the first situation because you always assign it to a value.
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
function tab_menu(){
if (buttonObject.value == value){
document.getElementById("div1").style.display = "block";
}
}
i was trying when click to buttons check Button Value and show a div based on Button's Value and hide others divs it should show just one div at same time. I wonder there is a javascript Master who can solve this problem.
SCRIPT:
function tabmenu(buttonObject){
var value = buttonObject.value
var target = document.getElementById(value);
if(target) {
var siblings = target.parentNode.getElementsByTagName("DIV");
for(i=0;i<siblings.length;i++){
siblings[i].style.display = "none";
}
target.style.display = "block";
}
}
HTML:
<div>
<div id="tab1">Tab1</div>
<div id="tab2">Tab2</div>
<div id="tab3">Tab3</div>
</div>
<button onclick="tabmenu(this);" value="tab1">Tab1</button>
<button onclick="tabmenu(this);" value="tab2">Tab2</button>
find the tab to activate (assuming value = tab.id)
find the parent and hence it's siblings (assuming they are DIVs)
hide the siblings
show the target
You can see it working here: http://jsfiddle.net/4rWdQ/
I have 3 buttons that control the visibility of 1 div.
we want to do following to div:
show the first time any of three buttons are clicked
show if button clicked is different to previously button click
hide if button clicked is the same as previous clicked and if div is currently visible
show if button clicked is the same as previous clicked and if div is currently invisible
currently I have this:
//$('#alert_area') = target div
$button = $('.button')
if ($button.attr('id') != $('#alert_area').attr('showing')){
$('#alert_area').show()
}else{
if ($('#alert_area').is(":visible")){
$('#alert_area').hide();
}else{
$('#alert_area').show();
}
}
$('#alert_area').attr('showing', $button.attr('id'))
It's only a slight improvement, but you can replace your else block with toggle. You can also cache your selector to neaten things up.
var $button = $('.button'), $alertArea = $("#alert_area");
if ($button.attr('id') != $alertArea.attr('showing')) {
$alertArea.show()
} else {
$alertArea.toggle();
}
$alertArea.attr('showing', $button.attr('id'));