Develop Reference

how to create hide/show toggle

I have two flip cards with a hide/show toggle. but when I click the hide/show button on the second flipcard it doesn't work. How can I make it so that when the hide/show switch on the second flip card is clicked, it starts working. I hope you understand.
this is my flip cards
<div id="main">
<div name="first flip card" style="margin-left: 50px ;padding: ;">
<label>
<input type="checkbox" />
<div class="flip-card">
<div class="front">
<h1>Գերմանիա</h1>
<p style="font-size: 50px;">1</p>
</div>
<div class="back">
<h1>About me</h1>
<hr />
<p>some text</p>
<button id='button' >hide/show</button>
<p id="newpost" style="display: none;" > Test text</p>
<hr />
</div>
</div>
</label>
</div>
<div name="second flip card" style="margin-left: 50px ;">
<label>
<input type="checkbox" />
<div class="flip-card">
<div class="front">
<h1>Գերմանիա</h1>
<p style="font-size: 50px;">1</p>
</div>
<div class="back">
<h1>About me</h1>
<hr />
<p>some text</p>
<button id='button' >hide/show</button>
<p id="newpost" style="display: none;" > Test text</p>
<hr />
</div>
</div>
</label>
</div>
</div>
this is my script for hide/show button
<script>
var button = document.getElementById('button');
button.onclick = function() {
var div = document.getElementById('newpost');
if (div.style.display !== 'none') {
div.style.display = 'none';
}
else {
div.style.display = 'block';
}
};
</script>
i hope you can help me
I tried many options, but each had some kind of jamb. For example, I tried other scripts in one, the text was not shown at all, in the second option, when I pressed hide / show on the second flip card, it showed the text on the first flip card.

Welcome to stackoverflow.
According to the W3C Markup Validation Service tool, this document contains a number of errors, including a "Duplicate ID" error. (See: W3C Validator)
Note: The id global attribute defines an identifier (ID) which must be
unique in the whole document. Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS). (See: HTML id at MDN)
So we need to use a class instead of ‍newpost id to target those elements.
Change the HTML to the following content — by formatting the code and fixing those errors:
<div id="main">
<div style="margin-left: 50px;">
<input type="checkbox" />
<div class="flip-card">
<div class="front">
<h1>Գերմանիա</h1>
<p style="font-size: 50px;">1</p>
</div>
<div class="back">
<h1>About me</h1>
<hr />
<p>some text</p>
<button type="button">hide/show</button>
<p class="newpost" style="display: none;"> Test text</p>
<hr />
</div>
</div>
</div>
<div style="margin-left: 50px ;">
<input type="checkbox" />
<div class="flip-card">
<div class="front">
<h1>Գերմանիա</h1>
<p style="font-size: 50px;">1</p>
</div>
<div class="back">
<h1>About me</h1>
<hr />
<p>some text</p>
<button type="button">hide/show</button>
<p class="newpost" style="display: none;"> Test text</p>
<hr />
</div>
</div>
</div>
</div>
Script:
This script scans the entire DOM for all button elements. Then whenever you click on a button, it first finds the parentElement of that button and then toggles the first element with a newpost class inside the corresponding parentElement.
<script>
document.querySelectorAll('button').forEach((button) => {
button.addEventListener('click', (event) => {
const newpostElement = event.target.parentElement.querySelector('.newpost');
if (newpostElement.style.display !== 'none')
newpostElement.style.display = 'none';
else
newpostElement.style.display = 'block';
})
});
</script>
Learn about HTML errors:
Invalid use of name attribute for div element
Invalid use of padding: ;
Element div not allowed as child of element label
The label element may contain at most one button, input, meter, output, progress, select, or textarea descendant.
Duplicate ID button.

According to your Question , What I Understand you want something like this:=
$("h1").on("click", function(){
console.log($(this).children("div"));
$(this).siblings("div.content").slideToggle();
});​
.content{
display:none;
margin: 10px;
}
h1{
font-size: 16px;
font-wieght: bold;
color: gray;
border: 1px solid black;
background: #eee;
padding: 5px;
}
h1:hover{
cursor: pointer;
color: black;
}
<div class="article">
<h1>TITLE 1</h1>
<div class="content">content 1</div>
</div>
<div class="article">
<h1>TITLE 2</h1>
<div class="content">content 2</div>
</div>
<div class="article">
<h1>TITLE 3</h1>
<div class="content">content 3</div>
</div>
<div class="article">
<h1>TITLE 4</h1>
<div class="content">content 4</div>
</div>
http://jsfiddle.net/Rwx7P/3/

You have two blocks with same ID (button and newpost), it must be always diffrent on one page.
function toggle(id) {
var div = document.getElementById(id);
if (div.style.display !== 'none') {
div.style.display = 'none';
}
else {
div.style.display = 'block';
}
}
<div id="main">
<div name="first flip card" style="margin-left: 50px; padding: ">
<label>
<input type="checkbox" />
<div class="flip-card">
<div class="front">
<h1>Գերմանիա</h1>
<p style="font-size: 50px">1</p>
</div>
<div class="back">
<h1>About me</h1>
<hr />
<p>some text</p>
<button onclick="toggle('newpost1')">hide/show</button>
<p id="newpost1" style="display: none">Test text</p>
<hr />
</div>
</div>
</label>
</div>
<div name="second flip card" style="margin-left: 50px">
<label>
<input type="checkbox" />
<div class="flip-card">
<div class="front">
<h1>Գերմանիա</h1>
<p style="font-size: 50px">1</p>
</div>
<div class="back">
<h1>About me</h1>
<hr />
<p>some text</p>
<button onclick="toggle('newpost2')">hide/show</button>
<p id="newpost2" style="display: none">Test text</p>
<hr />
</div>
</div>
</label>
</div>
</div>

Make entire card clickable by targeting <a> inside of it

I have some cards with an image, text, and link within them. Wrapping the card with an anchor tag is not possible in my case. Is it possible to target the anchor tag within the card and then make the entire card clickable to go to that link using jquery?
Ideal state: when you click anywhere on the card, the link is triggered and the user is taken to it.
<div class="todays-news">
<div class="container">
<div class="owl-carousel owl-theme">
<div class="item">
<div class="card">
<img src="images/home/home-image.png" />
<div class="card-body">
<strong>This is a title</strong>
<p>This is a paragraph.</p>
Continue Reading
</div>
</div>
</div>
<div class="item">
<div class="card">
<img src="images/home/home-image-2.png" />
<div class="card-body">
<strong>This is a title</strong>
<p>This is a paragraph.</p>
Continue Reading
</div>
</div>
</div>
</div>
</div>
</div>

This can be achieved with css, no javascript required.
.item {
position: relative;
}
.item a::before {
content: "";
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}
The element that you want to make clickable gets a position: relative. That creates a new containment block. We then add a before pseudo-class to the link. Position it absolutely and stretch it over the entire containment block.
https://play.tailwindcss.com/q0Pje5H2Br

Yes, you can do this with JavaScript, though if you could solve the problem with not being able to make the card an anchor, that would be better. There's no reason you can't put a div in an a element, a's content model is transparent.
But if you can't:
$(document).on("click", ".card", function(event) {
const $this = $(this);
// Don't interfere with a click actually on the anchor
// (that way, the user can still right-click it and
// use the browser-supplied menu for oew in new tab,
// shift click, etc.)
if ($this.find($(event.target).closest("a")[0]).length === 0) {
// Not on the anchor, do it
event.preventDefault();
$this.find("a")[0].click();
}
});
Note that you have to call click on the DOM element, not the jQuery object. If you call it on the jQuery object, it won't trigger the default action.

Simply use an onclick handler on the div:
<div class="todays-news">
<div class="container">
<div class="owl-carousel owl-theme">
<div class="item">
<div class="card" onclick="this.querySelector('a').click(); return true;">
<img src="images/home/home-image.png" />
<div class="card-body">
<strong>This is a title</strong>
<p>This is a paragraph.</p>
Continue Reading
</div>
</div>
</div>
<div class="item" onclick="this.querySelector('a').click(); return true;">
<div class="card">
<img src="images/home/home-image-2.png" />
<div class="card-body">
<strong>This is a title</strong>
<p>This is a paragraph.</p>
Continue Reading
</div>
</div>
</div>
</div>
</div>
</div>

Add a click handler for the card, and have it perform a click on the anchor:
$(".card").click(function() {
$(this).find("a")[0].click();
});

You can wrap block elements with <a>. It is valid HTML5 and renders your card clickable. You may need to adjust the css rules for the text inside this block however.
Edit: Since this isn't possible in your case, could you specify why?
<div class="todays-news">
<div class="container">
<div class="owl-carousel owl-theme">
<a class="item" href="https://www.example.com/">
<div class="card">
<img src="images/home/home-image.png" />
<div class="card-body">
<strong>This is a title</strong>
<p>This is a paragraph.</p>
<a>Continue Reading</a> <!-- unsure about the correct tag here -->
</div>
</div>
</a>
<a class="item" href="https://www.example.com/">
<div class="card">
<img src="images/home/home-image-2.png" />
<div class="card-body">
<strong>This is a title</strong>
<p>This is a paragraph.</p>
<a>Continue Reading</a> <!-- unsure about the correct tag here -->
</div>
</div>
</a>
</div>
</div>
</div>

Click smiley and place in input field

How can I click on a smiley / emoji from a list and place it in a input field? I can see in the Inspect Element Q (console log) that it is being clicked but I can not find a way to copy it to the input field.
HTML
<div id="wrapper">
<div class="bubble-container" ></div>
</div>
<div class="emoji" onclick="javascript:smileySelect(event);">
<span title="Happy Face"> 😀 </span>
<span title="Grinning Face"> 😃 </span>
<span title="Grinning Face with Smiling Eyes"> 😄 </span>
</div>
<div id="sendCtrls">
<input type="text" placeholder="Your message here" id="text">
<button id="myBtn" style="width: auto;"> Send </button>
<span title="Emoji" onclick="javascript:smiliesSH();"> 😃</span>
</div>
JAVASCRIPT
function smileySelect(event) {
// get selected item and place it in input field
};

You can get the clicked emoticon with event.target and add the textContent of that to the value of the input element.
I also added a check event.target != event.currentTarget to avoid all icons are inserted when you click on the parent but not on a child (emoticon). When your html content of the event handler gets more complicated then you probably want to add a class to all emoticon spans and check if the clicked element has that class.
function smileySelect(event) {
/*
event.target = the actually clicked element
event.currentTarget = the element that has the event handler
When they are not equal we know the click was on a child of the .emoji element.
Any child is valid since you only have the emoticon span elements inside the .emoji element.
*/
if (event.target != event.currentTarget) {
let smiley = event.target;
document.querySelector('#text').value += smiley.textContent;
}
};
<div id="wrapper">
<div class="bubble-container"></div>
</div>
<div class="emoji" onclick="javascript:smileySelect(event);">
<span title="Happy Face"> 😀 </span>
<span title="Grinning Face"> 😃 </span>
<span title="Grinning Face with Smiling Eyes"> 😄 </span>
</div>
<div id="sendCtrls">
<input type="text" placeholder="Your message here" id="text">
<button id="myBtn" style="width: auto;"> Send </button>
<span title="Emoji" onclick="javascript:smiliesSH();"> 😃</span>
</div>

You can try something like:-
<div id="wrapper">
<div class="bubble-container" ></div>
</div>
<div class="emoji" onclick="smileySelect(event.target.innerHTML)">
<span title="Happy Face"> 😀 </span>
<span title="Grinning Face"> 😃 </span>
<span title="Grinning Face with Smiling Eyes" > 😄 </span>
</div>
<div id="sendCtrls">
<input type="text" placeholder="Your message here" id="text">
<button id="myBtn" style="width: auto;"> Send </button>
<span title="Emoji" onclick="javascript:smiliesSH();"> 😃</span>
</div>
JAVASCRIPT
function smileySelect(emoji) {
if (emoji.includes("span") == false)
document.getElementById("text").value += emoji;
};

How to make a div hide when having same set of classes?

I have two set of div containers with input tags with same classes to both.
only difference is when input box of each clicked the resepctive parent div will add "frame-focus" class. what i want is if input is clicked and frame-focus class is exist, hide the div which has class "panel-set" of which the focus class exist.
Please check my div containers below. please advice how to proceed this
Ex:
<!--- here is 1st div container which input box is selected-->
<div class="block">
<div class="frame frame-focus">
<input name="set1">
<div class="panel-set"></div>
</div>
</div>
<!-- here is 2nd div -->
<div class="block">
<div class="frame">
<input name="set1">
<div class="panel-set"></div>
</div>
</div>

Use the child selector or the direct child selector to hide the .panel-set which is a child of .frame-focus:
.frame-focus > .panel-set {
display: none;
}
<!--- here is 1st div container which input box is selected-->
<div class="block">
<div class="frame frame-focus">
<input name="set1">
<div class="panel-set">1</div>
</div>
</div>
<!-- here is 2nd div -->
<div class="block">
<div class="frame">
<input name="set1">
<div class="panel-set">2</div>
</div>
</div>

html
<div class="block">
<div class="frame frame-focus">
<input name="set1">
<div class="panel-set">1</div>
</div>
</div>
<!-- here is 2nd div -->
<div class="block">
<div class="frame">
<input name="set1">
<div class="panel-set">2</div>
</div>
</div>
jquery
$(document).ready(function(){
$("input").click(function() {
$(this).siblings('.panel-set').hide();
});
});
Example jsfiddle

On page load, div visible for a moment

When my page refreshes, I can see this div for few seconds and then it goes away. How can I control this behaviour?
<div ng-cloak="true" ng-show="userFromGuardian">
<div class="logo">
<img src="img/orangeIcon_normal.gif" style="vertical-align: top"/>
<div style="text-align: center; margin-top: -2%"><span style="font-family:Century Gothic;font-size:48px;font-weight:normal;font-style:normal;text-decoration:none;color: #FF6600;">Online Quotation Tool</span></div>
</div>
<div class="headerGuardian">
<span style="text-align: left;margin-left: 1%;font-weight: normal;">Welcome</span>
<span style="text-align: left"> {{user.firstName}} {{user.lastName}}</span>
<a style="margin-right: 1%;float: right" ng-click="logOut()">logout</a>
</div>
</div>
//checking Guardian user
$rootScope.userFromGuardian =false;
UserFromGuardian.get(function(data){
$rootScope.userFromGuardian = data.userFromGuardianFlag;});

You need to add style="display:none;"
<div ng-cloak="true" ng-show="userFromGuardian" style="display:none;">
Javascript and CSS can't be relied upon to hide your div immediately.

I don't know why you use ng-show="userFromGuardian"to the div.
If you remove ng-show="userFromGuardian" then div will show.