We Keep Coding

Make content of header disappear when menu opens

I basically want to make that when I press on a button the first time it adds display: none; to an element and when I press it again it makes the element appear again (so add display: none;). How would I do this with jQuery?
This is the jQuery I tried to implement but as I'm new to Javascript I don't know why it isn't working.
$('#menuBtn').click(function() {
var clicks = $(this).data('clicks');
if (clicks) {
$('.header-text').css({
'display': 'none'
});
} else {
$('.header-text').css({
'display': 'block'
});
}
$(this).data("clicks", !clicks);
});

Use toggle or slideToggle (With animation)
$('#menuBtn').on('click', function() {
$('.header-text').toggle();
});
$('#menuBtnSlide').on('click', function() {
$('.header-text').slideToggle();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="menuBtn">Toggle</button>
<button id="menuBtnSlide">SlideToggle</button>
<div class="header-text">
This content must me show and hide
</div>

You could supply a modifier class in some external stylesheet for hiding the text and toggle it via toggleClass.
Word of advice: It's best not to use something like toggle because it will inject inline css into your elements, making it difficult to override in the long-run for something so simplistic.
const $headerText = $('.header-text');
$('#menuBtn').click(function() {
$headerText.toggleClass('header-text--hidden');
});
.header-text--hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="menuBtn" type="button">Toggle</button>
<header>
<p class="header-text">Text 1</p>
<p class="header-text">Text 2</p>
<p class="header-text">Text 3</p>
<p class="header-text">Text 4</p>
</header>

You actually don't need jQuery for this.
You can add CSS rule to set .hidden to display: none and then toggle that class when the button is clicked.
To catch the click event on the button, you need a click event listener
const header = document.querySelector('.header');
const toggle = document.querySelector('.menu-toggle');
toggle.addEventListener('click', () => {
header.classList.toggle('hidden')
});
.header {
background: red;
height: 3em;
}
.hidden {
display: none;
}
<header class="header"></header>
<button class="menu-toggle">Click me!</button>

.hidden{display:none !important;}
$('#menuBtn').click(function() {
$('.header-text').toggleClass("hidden");
});

Show div if another div has content

So I don't get why this isn't working. I want to show a Div when another div has a value. I got this code from stackoverflow and it's pretty simple. But it doesn't work for me. No console errors..
$(document).ready(function(){
if ($(".txt").html().length > 0) {
$('.btn-01').show();
}
});
If the html value of .txt is larger then 0 then show btn-01.
But it doesn't. In my web inspector it just says:
<div style="display: block;" class="btn-01"><p>Things</p></div>
If I remove the script it says:
<div class="btn-01"><p>Things</p></div>
So it does do something. I tried changing the show to hide. But no go.
<div style="display: none;" class="btn-01"><p>Things</p></div>
I tried:
$(document).ready(function(){
if ($(".txt").html().length > 0) {
$('.btn-01').addClass('showme);
}
});
btn-01 css:
.btn-01 {
background: #f60;
color: #fff;
border-radius: 2px;
padding: 5px;
text-align: center;
margin: 40px auto 0px auto;
width: 90%;
}
But that didn't work either. Does anyone know whats going on here?
Maybe I should work with an else statement? Help would be much appreciated.
JsFiddle

You need to either set the button to display none prior to the window loading or add an "else" statement to hide the element:
.btn-01{
display:none;
}
OR
$(document).ready(function(){
if ($(".txt").html().length > 0) {
$('.btn-01').show();
}
else
{
$('.btn-01').hide();
}
});
See the fiddle: https://jsfiddle.net/r89gg7tp/
IMPORTANT TO CONSIDER
If you have entered a line break between the starting and closing tags of the element, this will add to the length. You need to set the txt div to be in the following format:
<div class='txt'></div>
It may be better to change your function to this:
$(document).ready(function(){
if ($(".txt").html().trim(' ').length > 0) {
$('.btn-01').show();
} else {
$('.btn-01').hide();
}
});
This way you trim the whitespace before checking.
See the second fiddle: https://jsfiddle.net/r89gg7tp/3/

You need to hide the btn-01 with a "display:none" in the stylesheet and then execute your script.
I think you are having a "display:none !important" which is overriding the jquery show() function inline style.

This might help you.
$(document).ready(function(){
if (!$.trim($(".txt").html())){
$('.btn-01').addClass('showme');
}
});
Please let me know if you've any queries.

You can use .contents() with .toggle():
$(document).ready(function() {
$('.btn-01').toggle($(".txt").contents().length > 0);
});
.btn-01{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="txt">
<h3>Things Title</h3>
</div>
<div class="btn-01">
<p>Things</p>
</div>

You guys where all right. I needed to place the code in some Session file (Ajax). Now its working with the original code and even some that you provide.
Thanks!

Targeting previous div in javascript or css

HTML code:
<div class="content">
<textarea> hello.png </textarea>
</div>
<div class="content-btn">
Click me
</div>
Javascript code:
$(".button").click(function() {
if ($(this).parent().previousSibling('.content').css('display') == 'none'){
$('.content').hide();
$(this).parent().previousSibling('.content').show();
}else {
$('.content').hide();
}
});
How would I go about only showing the textarea when 'Cick me' is clicked or hovered preferably in css but if not javascript. Thanks guys
https://jsfiddle.net/uway5hhg/8/

As exercise you could do this effect in pure css (using :target pseudoclass and a long delay in a simple transition) if you add a close button just below the textarea
http://codepen.io/anon/pen/JYoMRK
<div class="content" id="text">
<textarea> hello.png </textarea><br />
Close
</div>
<div class="content-btn">
Open
</div>
CSS
#text {
overflow: hidden;
height: 0;
opacity: 0;
transition: opacity 0s 999999s;
}
#text:target {
opacity: 1;
height: auto;
transition-delay: 0s;
}
#text:target ~ div a.button { display: none; }
Anyway if you look for a straight jQuery approach, a simple toggle() is enough (you might have to hide the .content element via css depending on the initial condition of your textarea)
https://jsfiddle.net/uway5hhg/39/
$(".button").click(function() {
var content = $(this).parent().prev('.content');
content.toggle();
});

As far as I know there is no way to catch previous sibling in CSS.
But it works with jQuery, here is your slightly changed code:
$(".button").on('click', function() {
var ele = $(this),
par = ele.parent(),
sbl = par.prev();
if (sbl.css('display') == 'none'){
$('.content').hide();
sbl.show();
}else {
$('.content').hide();
}
});
Working example is here: https://jsfiddle.net/y0ab3n0L/

That should do it's job
JS:
$(".button").click(function() {
var contentBtn = $(this).parent(".content-btn");
var content = $(contentBtn).prev(".content");
var textarea = $(content).find("textarea");
$(textarea).toggle();
});
or event shorter:
$(".button").click(function() {
$(this).parent(".content-btn").prev(".content").find("textarea").toggle();
});
https://jsfiddle.net/uway5hhg/21/
Hope this helps :)

Solution provided by Fabrizio is a good one if you want no javascript.
However you can also modify the DOM to have a similar effect.
<div class="content-wrapper">
<div class="content" id="text">
<textarea>hello.png</textarea>
</div>
Click me
</div>
CSS
.content {
display:none;
}
.content-wrapper:hover .content {
display:block;
}
.content-wrapper:hover .button {
display:none;
}
https://jsfiddle.net/2Lsszgqz/

There is no such CSS pseudo element - a.button:click, so only JS solution will work (without changing your HTML structure). You can also get to close of it using :focus CSS pseudo class. But you will lack to go up one level in CSS and then show the textarea. So, only solution left is using JS.
In your sample JS code you have used .previousSibling('.content') which is native JS, which you are calling on jQuery object, that's why it will not work. jQuery equivalent of this function is .prev('.content')
Correct Syntax would be -
$(".button").click(function() {
if ($(this).parent().prev('.content').css('display') == 'none'){
$('.content').hide();
$(this).parent().prev('.content').show();
}else {
$('.content').hide();
}
});
Working Fiddle

Show/hide div on button click

I am trying to show and hide content depending on which button is pressed. The next button should show content 2 and hide content 1, and previous button should do the opposite.
<script type="text/javascript">
$('a.button-next').click(function() {
$("#tab-content2").addClass("show");
});
</script>
CSS:
#tab-content2 {
display: none;
}
#tab-content2.show {
display: none;
}
HTML:
<div id="tab-content1">
<?php the_content(); ?>
</div>
<div id="tab-content2">
<?php the_field("experience");?>
</div>
Previous
next

Try toggleClass and don't forgot to use document.ready():
$(document).ready(function() {
$('a.button-next').click(function() {
$("#tab-content2").toggleClass("show");
});
});
#tab-content2.show {display:block;}

Use a generic class for all content
<div class="content" id="tab-content1">
<?php the_content(); ?>
</div>
<div class="content" id="tab-content2">
<?php the_field("experience");?>
</div>
Previous
next
So the css would be
.content {
display: none;
}
And the Javascript
$('a.button-next').click(function() {
$('.content').hide(); // To hide all other contents
$("#tab-content2").show(); // Show the one content you want to display
});

The display property of show is none.
Change it to block.
Also, you can just use the .show() or .hide() function instead of using classes.

Try this...
$('a.button-next').on('click', function() {
$("#tab-content2").toggle("show");
});

HTML
<div id="tab-content-holder">
<div id="tab-content1 show">
<?php the_content(); ?>
</div>
<div id="tab-content2">
<?php the_field("experience");?>
</div>
</div>
Previous
Next
JS
$(document).ready(function() {
$(".button-back").click(function() {
MenuNavigationClick(-1);
});
$(".button-next").click(function() {
MenuNavigationClick(1);
});
function MenuNavigationClick(direction) {
// Get current element index and toggle
var current = $("#tab-content-holder .show");
var index = current.index();
current.toggleClass("show");
// Move to next element and check for overflow
index += 1 * direction;
index %= $("#tab-content-holder div").length;
// Toggle next element
$("#tab-content-holder div:eq("+index+")").toggleClass("show");
}
});
CSS
#tab-content-holder div {
display: none;
}
#tab-content-holder div.show {
display: block;
}

Have you tried transferring the show class on another line?
.show
{
display: block;
}

Adapt code inside dokuwiki spoilers style?

To change selector so it only show/hides when i click the image i put spoiler/ popdown menu directly after .OS image. Right now the popdown is a child of the .OS container, so clicks on it are passed to the .OS click handler.
But the code isn't perfect because when i click the 1st MAC both spoilers are opened.
But I want that spoilers are opened one at a time
But the main problem is that I can't fix the javascript code properly inside these types of spoilers (dokuwiki class) inside <td> tags:
This is the javascript code I use :
<div class="dokuwiki">
<div class="right_page">
<div class="entry-content">
<script type="text/javascript" src="./zzzz_files/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".nonjs").removeAttr( "href"); //href is needed for users without JS
$('.OS').click(function(){
if($(".details").is(":visible"))
{
$(".details").not(":hidden").hide("slow");
return true;
}
else
{
$(".OS").not(this).each(function(i) {
$(".details").hide("slow");
});
$(".details").show("slow");
return false;
}
});
});
</script>
<style type="text/css">
<!--
.details {
display: none;
clear: both;
padding: 2px;
}
.nonjs{
cursor:pointer;
}
img {
border: 0px;
}
-->
</style>
I thought about doing a video to better explain the problem and provide the local version of files for testing code:
Thanks in advance

This code works:
$(document).ready(function(){
$(".nonjs").removeAttr( "href");
//href is needed for users without JS
$('.OS').click(function(e){
if(!$(e.target).parents('.details').length){
if($(this).find('.details').is(":visible"))
{
$(this).find('.details').not(":hidden").hide("slow");
return true;
}
else
{
$(this).find('.details').show("slow");
return false;
}
}
});
});

I don't know what you're asking but here is what I think you want:
When clicking on an image, show the details below it and hide all others. If the details are already visible, hide them. Clicking something inside the details should not affect anything.
Demo
$(document).ready(function(){
$(".nonjs").removeAttr( "href"); //href is needed for users without JS
$('.OS').click(function(){
var details = $(this).next(".details");
$(".details").hide("slow");
if(details.is(":hidden")) {
details.show("slow");
}
});
});