a link open div (accordion style) - javascript

I just need div.accordion1 to be opened when I click on a#accordion1. Im not an expert on Javascript. I have /wp-includes/js/jquery/jquery.js?ver=1.12.4 loading on the page trying to use the simple html layout below:
in the header section:
<div class="header">
toggle open / close accordion1
toggle open / close accordion2
</div>
positioned somewhere in the body of page:
<div class="body">
<div class="accordion1">
Lorem Ipsum....
</div>
<div class="accordion2">
Lorem Ipsum....
</div>
</div>

if i understand right, you want when you press the toggle button, to show a paragraph, and when you click the same button to hide the specific paragraph
here is a good example from w3-schools
https://www.w3schools.com/howto/howto_js_toggle_hide_show.asp
you have to make a button that calls a function on click
<button onclick="myFunction()">Try it</button>
<div id="myDIV">
This is my DIV element.
</div>
<script>
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>

Related

i want to hide the showmore button if the height of the div(ccontainer) is less than 550px

i want to hide the showmore button if the height of the div(ccontainer) is less than 550px and i will have more than one div and for each i will have a showmore button, and i already have a code that works (hides the btn) but it doesn't work for more than one button like if there are two divs it will hide the button of the first div but it just ignores the second one maybe that is because the code is implemented from top to bottom, so to sum it up what i want to do is that if div's height is less than 550px the show more button should be hidden and the code should also hide the second button for the second div.
and sorry for my broken English
code
js
// showmore btn show/hide
const btn = document.querySelector('.showmore');
const height = document.querySelector('#ccontainer').clientHeight;
btn.forEach(function(){
if (height <= 530) {btn.style.display = 'none';} else {btn.style.display = '';}
)}
html
<div class="ccontainer" id="ccontainer">
<p id="context"> content </p>
<div class="img" id="cntimgcon" >
<img src="images\image2.jpg" id="cntimgp1">
</div>
<p id="context"> content </p>
</div>
<Button class="showmore"> show more </button>
Your question is not fully understandable.But I think you are asking that hide the top most showmore button and display other showmore button when the upper ccontainer is less than 500px.Your styling of the button looks not good to me,but I didnt change it since this is a jquery question. Inorder to test this code I duplicate same html code you have provided. And added image url for display the image since you didnt provide image resource.And I added window.onload function in order to execute your targeted function after the page loads.
working sanbox.
I need to mention that you used const btn= document.querySelector('.showmore').But It should be change to const btn =document.querySelectorAll(".showmore");.
querySelector only select the first element but querySelectorAll return you a list of node.
html code
<div class="ccontainer" id="ccontainer">
<p id="context">content</p>
<div class="img" id="cntimgcon">
<img
src="https://crdms.images.consumerreports.org/c_lfill,w_470,q_auto,f_auto/prod/cars/chrome/white/2018TOC310001_1280_01"
id="cntimgp1"
height="25px"
width="auto"
/>
</div>
<p id="context">content</p>
</div>
<button class="showmore">show more</button>
<div class="ccontainer" id="ccontainer">
<p id="context">content</p>
<div class="img" id="cntimgcon">
<img
src="https://crdms.images.consumerreports.org/c_lfill,w_470,q_auto,f_auto/prod/cars/chrome/white/2018TOC310001_1280_01"
id="cntimgp1"
height="25px"
width="auto"
/>
</div>
<p id="context">content</p>
</div>
<button class="showmore">show more</button>
js code
<script>
window.onload = function () {
const btn = document.querySelectorAll(".showmore");
const height = document.querySelector("#ccontainer").offsetHeight;
btn.forEach(function (single, index) {
if (height <= 500 && index == 0) {
single.style.display = "none";
} else {
single.style.display = "block";
}
});
};
</script>

Javascript: Replace a Shown Div with another Hidden Div with Button onclick

i want to replace a div that is already displayed with another Hidden div with just one click. i don't want it to toggle. below is the code.
<html>
<script type="text/javascript">
function show(elementId) {
document.getElementById("surf").style.display="none";
document.getElementById(elementId).style.display="block";
}
</script>
<div id="mode" style="display: visible;">Display By Default</div>
<div id="surf" style="display: none;">Display On Click</div>
<br/>
<button type="submit" id="submit" onclick="show('surf');" name="submit">Submit</button>
</html>
My desired output should be Display On Click when i click the button.
But right now i'm having both Display By Default and Display On Click showing when i click the button display by default at the top and Display On Click at button. i just want Display By Default to be replaced with Display On Click on same line.
<!DOCTYPE html>
<html>
<body>
<div id="div1" style="display:block">
<h2>first div</h2>
</div>
<div id="div2" style="display:none">
<h2>second div</h2>
</div>
<button onclick=show()>click here</button>
</body>
<script>
function show() {
let div1 = document.querySelector('#div1');
let div2 = document.querySelector('#div2');
if (div1.style.display == "block") {
div1.style.display = "none";
div2.style.display = "block";
} else {
div1.style.display = "block";
div2.style.display = "none";
}
}
</script>
</html>
onclick to hide div1 and show div2,
Next click hide div2 and show div1.
You are targeting the wrong element here document.getElementById("surf").style.display="none";. The "surf" should be "mode" instead. This worked for me
function show(elementId) {
document.getElementById("mode").style.display="none";
document.getElementById(elementId).style.display="block";
}
<div id="mode" style="display: visible;">Display By Default</div>
<div id="surf" style="display: none;">Display On Click</div>
<br/>
<button type="submit" id="submit" onclick="show('surf');" name="submit">Submit</button>

if div is visible, change state of inner text

Hell,
I have the html code below:
<div class="row">
<button id="dog-btn">Show Dog</button>
<br>
</div>
<div id="pets">
</div>
I want some simple code that uses JS to check if the pets div is visible. If it is, the inner text of dog-btn should read Hide Dog. If not visible, it should read Show Dog.
Let me know!
You can get this by using the .style.display() DOM method.
HTML
<div class="row">
<button id="dog-btn" onclick="showDog()">Show Dog</button>
<br>
</div>
Dog
JS
document.getElementById("pets").style.display = "none";
function showDog() {
var petDiv = document.getElementById("pets");
var petBtn = document.getElementById("dog-btn");
if (petDiv.style.display == "none") {
petBtn.innerHTML = "Hide Dog";
petDiv.style.display = "block"
}
else {
petBtn.innerHTML = "Show Dog";
petDiv.style.display = "none"
}
}
#DemoNemo5 's answer technically does what your question asks, but i'll assume that you want a button that toggles hiding and showing. Also the previous answer only changes the button once whenever that piece of code is ran.
function togglePets(){
if(document.getElementById("pets").style.display != "none"){
document.getElementById("dog-btn").innerHTML = "Show Dog";
document.getElementById("pets").style.display = "none";
console.log("hide")
} else {
document.getElementById("dog-btn").innerHTML = "Hide Dog";
document.getElementById("pets").style.display = "block";
console.log("show")
}
}
<div class="row">
<button id="dog-btn" onclick="togglePets()">Hide Dog</button>
<br>
</div>
<div id="pets">
stuff
</div>
we make a function that's called every time the button is clicked, the function checks if the style.display is none (which means it's hidden) and changes the text ofthe button and toggles the display of the pets div
const dog_btn = document.querySelector("#dog-btn");
const pets = document.querySelector("#pets");
dog_btn.addEventListener("click", ()=> {
pets.style.display = pets.style.display !== "none" ? "none" : "initial";
dog_btn.innerText = pets.style.display !== "none" ? "Hide Dog" : "Show Dog";
});
<div class="row">
<button id="dog-btn">Hide Dog</button>
<br>
</div>
<div id="pets">
Something
</div>
You can get the div using document.getElementById() in order to access its styles. This code assumes you're toggling the CSS display property.
if(document.getElementById("pets").style.display == "none"){
document.getElementById("dog-btn").innerHTML = "Show Dog";
} else {
document.getElementById("dog-btn").innerHTML = "Hide Dog";
}
<div class="row">
<button id="dog-btn">Show Dog</button>
<br>
</div>
<div id="pets">
</div>

How to hide Elements in Javascript

I want that the text ist hidden in the beginning and after clicking the button it is displayed. I would be really greatfull if someone would find the mistake in my code.
function F1()
{
var x = document.getElementById("step1DIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
<!DOCTYPE html>
<html>
<body>
<button onclick="F1()"> <b>Step 1</b> </button>
<div id="step1DIV">
<p> text </p>
</div>
</body>
</html>
You need to give it an initial style that hides it in the HTML.
function F1()
{
var x = document.getElementById("step1DIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
<button onclick="F1()"> <b>Step 1</b> </button>
<div id="step1DIV" style="display: none;">
<p> text </p>
</div>
But inline styles are poor design, it's better to use a class with CSS.
function F1()
{
var x = document.getElementById("step1DIV");
x.classList.toggle("hidden");
}
.hidden {
display: none;
}
<button onclick="F1()"> <b>Step 1</b> </button>
<div id="step1DIV" class="hidden">
<p> text </p>
</div>
I just defined it as 'none' to begin with as such:
<div id="step1DIV" style="display: none">
Try to initially set the display of your step1 DIV to none. Either using inline styling or CSS.
You can also try to run your function on page load.
You want to toggle the hidden attribute defined in the HTML Standard.
function F1 () {
document.getElementById("a").toggleAttribute("hidden");
}
<!DOCTYPE html>
<html>
<body>
<button onclick="F1()"> <b>Step 1</b> </button>
<div id=a>
<p> text </p>
</div>
</body>
</html>

How can I use JavaScript OnBlur() in HTML div?

I have a menu and I can open and close the menu clicking on a tag. It works.
Also I use OnBlur(). Actually it works too but When I click a div in the menu, OnBlur active, menu closes and div's onclick doesn't works. How can I fix this problem ?
In JavaScript Codes;
<script>
function Acc_Show() {
var q = document.getElementById("he-my");
q.style.display = "";
document.getElementById("my-account-btn").focus();
document.getElementById("my-account-btn").setAttribute("onclick", "Acc_Hide()");
}
function Acc_Hide() {
var q = document.getElementById("he-my");
q.style.display = "none";
document.getElementById("my-account-btn").setAttribute("onclick", "Acc_Show()");
}
</script>
In HTML codes;
<a id="my-account-btn" href="javascript:;" onclick="Acc_Show()" onblur="Acc_Hide()">My Account</a>
My Menu's Image;
http://i.stack.imgur.com/OMg6n.png
UPDATES Additional Codes From OP:
<div class="he-myac" id="he-my" style="display:none;">
<div id="my-account-wrapper">
<div class="myaccount" onclick="GoAdress('test.aspx')">Test</div>
<br/>
<div class="myaccount" onclick="GoAdress('settings.aspx')" >Settings</div>
<br/>
<div class="myaccount" onclick="GoAdress('log_out.aspx')">Log Out</div>
</div>
I have a feeling this line q.style.display = ""; in your Acc_Show() function is causing the issue. Try replace it with q.style.display = "block";.
When an onblur event is triggered, your Acc_Hide() function hides your <div> by calling q.style.display = "none";. Then the next click on my-account-btn triggers your Acc_Show() function, which set your q.style.display to an empty string. That doesn't unhide your <div> block.

Categories

Resources