This question already has answers here:
jquery - Collapsing / Expanding divs?
(3 answers)
Closed 8 years ago.
I am trying to make a content DIV to expand and to collapse according to their contents.
Before expand it should be like this -
After expand it should be like this -
I am not sure how to use jquery for this. Tried with toggle class but couldn't get it to work.
This is my all code so far - http://jsbin.com/bicenomi/1/edit
Hope someone will help me.
Thank You.
You may put the extra content in a Div. and make it display: none at beginning, and once a user clicks on View Details just toggle its display to display:block.
and if user clicks on Collapse, make div display:none again.
<html>
<head>
<script type="text/javascript">
function HideInfo() {
var Chck = document.getElementById('ViewCollapse');
alert(Chck.innerHTML);
if (Chck.innerHTML == "Collapse") {
document.getElementById('MoreInfo').style.display = 'none';
Chck.innerHTML = "View";
}
else if (Chck.innerHTML == "View") {
alert('view');
document.getElementById('MoreInfo').style.display = 'block';
Chck.innerHTML = "Collapse";
}
}
</script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="timetable">
<h5><i class="icon fa fa-circle"></i><strong>xxxxxxxxxx</strong></h5>
<h6><small>No words</small></h6>
<h5><small>No words found in this</small></h5>
<h5><strong>xxxxxxxxxx</strong></h5>
<h6><small>No words</small></h6>
<h5><small>No words found in this</small></h5>
<div id="MoreInfo">
<h5><i class="icon fa fa-circle"></i><strong>xxxxxxxxxx</strong></h5>
<h6><small>No words</small></h6>
<h5><small>No words found in this</small></h5>
<h5><strong>xxxxxxxxxx</strong></h5>
<h6><small>No words</small></h6>
<h5><small>No words found in this</small></h5>
</div>
</div>
<div class="viewmore">
<p class="small"><span>Medium:</span> No words</p>
<p onclick="HideInfo();" id="ViewCollapse" class="small">Collapse</p>
</div>
</body>
</html>
i just create a small demo. it works for me, Please try it and tell me does it solves your problem
Check out the demo below
http://jsfiddle.net/hungerpain/eK8X5/7/
JS
$(".header").click(function () {
$header = $(this);
//getting the next element
$content = $header.next();
//open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
$content.slideToggle(500, function () {
//execute this after slideToggle is done
//change text of header based on visibility of content div
$header.text(function () {
//change text based on condition
return $content.is(":visible") ? "Collapse" : "Expand";
});
});
});
Related
I'm using elementor for my wordpress site and I wish to have a button in a first div (section) that control if a second and separate div (section) is display or not. I've tried to use the checkbox hack but it's working only if the checkbox is in the div as the content https://css-tricks.com/the-checkbox-hack/
Is there a solution to use CSS or even javascript ? If you advice to me to use javascript I'll put in my function.php file and as I'm begginer in javascript can you please write all the function I have to implement into my function.php file.
Basically it means :
<div>button</div> <div>content to show and hide on click on the button</div>
Best regards,
Clément
You can use Jquery:
1-Put an id to your DIV
<div id = "btn_show"> button </div> <div id = "show"> content to show and hide on click on the button </div>
2-Call jquery to display it
$("#btn_show").click(function(){
$("#show").show();
//or
$("#show").hide();
});
And jquery you can call it with CDN
<script src="https://code.jquery.com/jquery-3.6.0.js"</script>
In javascript without any library this could be very easy but you need to put an id on your divand your button.
<div id="myButton">button</div>
<div id="myDiv">
content to show and hide on click on the button
</div>
Then you just add a script section like this : (it just need to be after your div and your button in the DOM)
<script>
var myDiv = document.getElementById('myDiv');
var myButton = document.getElementById('myButton');
myButton.addEventListener('click', e => {
myDiv.classList.toggle('visible'):
});
</script>
And at last, you need a css like this:
.visible {
display: none;
}
Thanks for all of yours answers! Here what I use:
<button onclick="myFunctionopenclose()">Click Me</button>
<div id="myDiv" style="display:none;">content to hide and show</div>
<script> function myFunctionopenclose() {
var x = document.getElementById("myDiv");
if (x.style.display === "block") {
x.style.display = "none"; }
else {
x.style.display = "block";}}
Best regards,
Clément
Having a very weird issue with a simple div visibility toggle script.
I'm just using javascript to switch a div between 'display: block' and 'display: none' to toggle its visibility. Very routine stuff.
And in general it works, but it always fails on the first click after a fresh page load. Then it works consistently from the second click onward.
No error output on console.
Relevant HTML:
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="res/classes.js"></script>
<script type="text/javascript" src="res/util_c.js"></script>
<script type="text/javascript">
// load client prefs
var clientPrefs = new ClientPrefs();
</script>
</head>
<body>
<a id="join_show_publist" class="a_btn" onClick="javascript:joinPublistToggle()">View Public Matches</a><br />
<!-- list of public games -->
<div id="join_publist_container" class="ovr">
<table id="join_publist_listbox">
<tr id="join_publist_listbox_header">
<td>Table Name</td>
<td>Open</td> <!-- open seats remaining at table -->
</tr>
</table>
<div class="spacer"></div>
<div id="join_savePref_container">
<input id="join_savePref" type=checkbox onclick="javascript:clientPrefs.joinAlwaysShowPubToggle()" />
<span id="join_savePref_label" onclick="javascript:clientPrefs.joinAlwaysShowPubToggle()">Always show public tables list</span>
</div>
</div>
Relevant CSS:
div.ovr {
display: none;
}
...and finally in util_c.js:
// toggle visibility of public tables list
function joinPublistToggle() {
var listContainer = document.getElementById('join_publist_container');
if (listContainer.style.display == 'none') {
listContainer.style.display = 'block';
} else {
listContainer.style.display = 'none';
}
}
First click: nothing happens.
Second click: the DIV is shown
Third click: the DIV is re-hidden
etc..
If I put an alert(listContainer.style.display) into the joinPublistToggle function, the alert comes up empty with the first click, then shows 'none' with the second click.
But the CSS specifically sets the display style for that div as 'none' on load. And if I look at that div in the page inspector after a fresh page load the inspector specifically says the div's display property is set to none.
So the issue seems to be that javascript is reading that property as empty even though that property is set as 'none'.
Why would it do that?
style returns the inline style of the element, and your element doesn't have any, which is why listContainer.style.display returns an empty string and the condition fails.
It would work if you compared against 'block' instead but it's not really more reliable.
function joinPublistToggle() {
var listContainer = document.getElementById('join_publist_container');
if (listContainer.style.display == 'block') {
listContainer.style.display = 'none';
} else {
listContainer.style.display = 'block';
}
}
https://stackoverflow.com/questions/69213611/js-onclick-event-ignores-first-click-works-for-every-subsequent-click/69224191#
The other answers provide valid solutions, here is another using classes:
CSS:
div.hidden {
display: none;
}
HTML:
<div id="join_publist_container" class="ovr hidden">
(of course you can also just keep using ovr but I wasn't sure what that's for)
JS:
function joinPublistToggle() {
document.getElementById('join_publist_container').classList.toggle('hidden');
}
And in general it works, but it always fails on the first click after a fresh page load. Then it works consistently from the second click onward.
I am going to asume when you clicked the link, the checkbox and the table should go away. And when it is clicked again, the table and the checkbox should show. I modified your code and it works for me.
for your HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript" src="classes.js"></script>
<script type="text/javascript" src="util_c.js"></script>
<script type="text/javascript">
// load client prefs
var clientPrefs = new ClientPrefs();
</script>
</head>
<body>
<a id="join_show_publist" class="a_btn" onClick="javascript:joinPublistToggle()">View Public Matches</a><br />
<!-- list of public games -->
<div id="join_publist_container" class="ovr">
<table id="join_publist_listbox">
<tr id="join_publist_listbox_header">
<td>Table Name</td>
<td>Open</td> <!-- open seats remaining at table -->
<td>Starts</td> <!-- time left until game starts (or "started" if underway) -->
<td>Timer</td> <!-- time limit for turns (or "none") -->
<td>Min</td> <!-- min players to start the round (or '--' if already underway) -->
<td>Late</td> <!-- whether late joiners are allowed at the table -->
<td>AI</td> <!-- whether there are any AI players at the table (and if so, how many)
also colour denotes difficulty: green-easy / yellow-med / red-hard -->
</tr>
<!-- Generate list via js. Clicking any list entry joins -->
</table>
<div class="spacer"></div>
<div id="join_savePref_container">
<input id="join_savePref" type=checkbox onclick="javascript:clientPrefs.joinAlwaysShowPubToggle()" />
<span id="join_savePref_label" onclick="javascript:clientPrefs.joinAlwaysShowPubToggle()">Always show public tables list</span>
</div>
</div>
Classes.js:
// ClientPrefs - client-side preferences
class ClientPrefs {
constructor() {
// JOIN GAME page settings
this.joinAlwaysShowPub = false;
}
joinAlwaysShowPub() { return joinAlwaysShowPub; }
joinAlwaysShowPubToggle() {
// toggle setting in memory
this.joinAlwaysShowPub = !this.joinAlwaysShowPub;
// update checkbox & label
document.getElementById('join_savePref').checked = this.joinAlwaysShowPub;
}
}
And finally your other script:
function joinPublistToggle() {
var listContainer = document.getElementById('join_publist_container');
if (listContainer.style.display == 'none') {
listContainer.style.display = 'block';
} else {
listContainer.style.display = 'none';
}
}
Here are few reasons why your code might not work:
I think the problem is that you mistyped joinPublistToggle() to joinShowPubList.
Your div has a value of nothing for the display property. So, when JS looks at your div, well, the div is not set to none or block, I don't know how to handle it. After you clicked the link a second time, it sets the display in your JS code. So, it knows how to handle it.
Maybe add an display property to your a tag and set it to block so JS know what the property of the style is.
<a id="join_show_publist" class="a_btn" onClick="javascript:joinPublistToggle()" style="display:block;">View Public Matches</a><br />
This doesn't really answer my question, but I've implemented a simple workaround by adding an OR statement into the JS function:
function joinPublistToggle() {
var listContainer = document.getElementById('join_publist_container');
if ( (listContainer.style.display == 'none') ||
(listContainer.style.display == '' ) ) {
listContainer.style.display = 'block';
} else {
listContainer.style.display = 'none';
}
}
This doesn't explain why it was behaving so odd, and it isn't a proper solution (as a proper solution would address the cause, not the symptom).
But it works.
I won't mark the post as solved just yet in case any wizards end up reading this and are able to explain why the problem occurred in the first place.
I am new to coding and need help with jQuery. I have 2 <div>s (one with an image, the other with a menu list, both 50% width) and I need to be able to click one of the menu options to make a new div (50% width) appear from the right while reducing the other 2 divs width to 25% each. Then clicking on the same menu option to hide the new div and revert back to the original widths. But if I click on another menu option while the new div is visible, I need it to change the content to that specific menu option content.
How can I swap the left-hand <div> out with jQuery?
Here's the HTML I'm working with:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<!-- SCRIPT FILES -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="script.js"></script>
<!-- CSS STYLESHEETS -->
<link rel="stylesheet" href="reset.css" type="text/css" />
<link rel="stylesheet" href="main.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
</div><!--header-->
<div id="container">
<div class="box-container">
<div class="box1">
<img src="images/Untitled-1.png" alt="logo">
</div>
<div class="box2">
<div id="nav">
<ul>
<li><a>hello!</a></li>
<li><a>ADVERTISING</a></li>
<li><a>DESIGN</a></li>
<li><a>ABOUT</a></li>
<li><a>BLOG</a></li>
<li><a>SHOP</a></li>
</ul>
</div><!--nav-->
</div><!--box2-->
<div class="box3">
<div id="ADVERTISING" class="content">ADVERTISING</div>
<div id="DESIGN" class="content">DESIGN</div>
<div id="ABOUT" class="content">ABOUT</div>
<div id="BLOG" class="content">BLOG</div>
<div id="SHOP" class="content">SHOP</div>
</div>
</div><!--box-container-->
</div><!--container-->
<div id="footer">
</div><!--footer-->
</div><!-- wrapper-->
</body>
</html>
Here's a working jsFiddle with the styles: http://jsfiddle.net/YcphY/6/
For starters, here's a method that ties the below examples of how to do this into the animation you're after:
$(function() {
$("#nav").delegate("li","click", function() {
var newDiv = $(".box3 .content").eq($(this).index()-1);
newDiv.siblings().hide().end(); // hide the others
if(newDiv.is(":visible")) {
// if shown, fade it out, when the fade finishes, slide everything back
newDiv.fadeOut(function() {
$(".box3").hide();
$(".box1, .box2").animate({ width: "50%" });
});
} else {
// if not shown, then slide over space, then fade in
$(".box1, .box2").animate({ width: "25%" }, function() {
$(".box3").show();
newDiv.fadeIn("fast");
});
}
});
});
Given your current CSS you can do this:
$(function() {
$("#nav").delegate("li a","click", function() {
$(".box3").show();
$("#" + $(this).text()).show().siblings().hide();
});
});
Here's a working example, though you can see the CSS will need a bit of work to get it going 100%. I suggest a few changes though: give your links and containers matching IDs, like this:
<li><a id="ad">ADVERTISING</a></li>
<div id="ad-container" class="content">ADVERTISING</div>
Then the JS can be:
$(function() {
$("#nav").delegate("li a","click", function() {
$(".box3").show();
$("#" + this.id + "-container").show().siblings().hide();
});
});
Here's a working example of that...it allows you to change the text at will and not worry about the JS breaking later. Another alternative yet is to go off the index of the link in the list using .index() of the <li>, if the number of links was consistent with the <div>s in all cases, even if there's an offset because of the "hello!" link.
Here's an example of an index approach with your current HTML:
$(function() {
$("#nav").delegate("li","click", function() {
$(".box3").show();
$(".box3 .content").hide().eq($(this).index()-1).show();
});
});
I think jQuery's animate function might be of use to you.
What you'd need to do is either have a hidden div positioned out of the window added to your HTML (or maybe add it dynamically using jquery on document.ready event, if you prefer) and the use the above mentioned animate function to slide it in and out and bind it to the menu item's click function.
Sample Code
$(document).ready(function(){
$('#slide').click(function(){
var hidden = $('.hidden');
if (hidden.hasClass('visible')){
hidden.animate({"left":"-1000px"}, "slow");
hidden.removeClass('visible');
} else {
hidden.animate({"left":"0px"}, "slow");
hidden.addClass('visible');
}
});
});
Explanation
In the above code we are binding code to the click event of an element with a id "slide". Once the element is clicked the code gets initiated. We check if the .hidden has a css class called "visible". If not we animate the hidden div to slide in. and if it has a visible class then slide it out.
Working Fiddle
Here is a working JSFiddle for you
Some pointers
In the hidden div's CSS remember to specify a z-index greater than that of the current left panel.
In the hidden div's CSS remember to set position to absolute and left to around -1200px (or greater than window.width() to make it work on all screen sizes.)
I am using jQuery to hide / show sections of content on a page. On one page, I have two such sections. Right now the page loads with both hidden. I need the page to load with the first div visible and the second one hidden.
Here is my javascript:
function a2012() {
var ele = document.getElementById("toggleArch12");
var text = document.getElementById("displayArch12");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "2012 Newsletter Archive";
}
else {
ele.style.display = "block";
text.innerHTML = "Hide Archive";
}
}
function a2011() {
var ele = document.getElementById("toggleArch11");
var text = document.getElementById("displayArch11");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "2011 Newsletter Archive";
}
else {
ele.style.display = "block";
text.innerHTML = "Hide Archive";
}
}
and the HTML to set up the DIVs and their toggle links:
<a id="displayArch12" href="javascript:a2012();">2012 Newsletter Archive</a>
<div id="toggleArch12" style="display:none">content goes here</div>
<a id="displayArch11" href="javascript:a2011();">2011 Newsletter Archive</a>
<div id="toggleArch11" style="display:none">content goes here</div>
I tried changing style="display:none" for the first div to style="display:visible" and while it does cause the page to load with the contents visible, the toggle link still shows the "click to open" text (in this case "2012 Newsletter Archive").
I need the first div to load visible and the correct toggle text (Hide Archive) to show as well. Any ideas?
If you want to use jQuery (which you are not from the code you've posted), you could write it like this:
$("#displayArch11").click(function(e) {
var $display = $(this)
$display.next().toggle(function() {
$display.html($display.html() == "2011 Newsletter Archive" ? "Hide Archive" : "2011 Newsletter Archive");
});
e.preventDefault();
});
$("#displayArch12").click(function(e) {
var $display = $(this)
$display.next().toggle(function() {
$display.html($display.html() == "2012 Newsletter Archive" ? "Hide Archive" : "2012 Newsletter Archive");
});
e.preventDefault();
});
and the HTML like this
<a id="displayArch12" href="#">2012 Newsletter Archive</a>
<div id="toggleArch12" style="display:none">content goes here</div>
<a id="displayArch11" href="#">2011 Newsletter Archive</a>
<div id="toggleArch11" style="display:none">content goes here</div>
This is easier if you use jQuery, but I think simply setting the correct default html should achieve your goal.
<a id="displayArch12" href="javascript:a2012();">Hide Archive</a>
<div id="toggleArch12" style="display:block">content goes here</div>
Change the inline script:
<div id="toggleArch12" style="display:block">content goes here</div>
First, if you want one of the divs to be visible, just don't specify the display property. They are visible by default. Though the value you are looking for with a div is display:block;
I would use a div instead of a link for your toggling needs.
<div id="displayArch12" class="toggleDiv">
2012 Newsletter Archive
<div id="toggleArch12" style="display:block;">Content Here</div>
</div>
<div id="displayArch11" class="toggleDiv">
2011 Newsletter Archive
<div id="toggleArch11" style="display:none;">Content Here</div>
</div>
Then you need some real jQuery to toggle them properly.
$(function() {
$(".toggleDiv").click(function () {
$("div:first-child", this).toggle();
});
});
That should work for you. And of course don't forget to include the jQuery library itself. The easiest way is to use the Google API link.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
I'm pulling a content from PHP array and I have a situation like this:
<div class="weight-display">
<span>04/25/2011</span> <span>100lbs</span> <span>Edit</span> <a href="http://foo.com">Delete</span>
</div>
<div class="weight-display">
<span>04/27/2011</span> <span>150lbs</span> <span>Edit</span> <a href="http://foo.com">Delete</span>
</div>
etc...
Now when somebody clicks on Edit within, let's say, first div where weight is 100lbs, I just need that "div" to change and to have input field instead of simple text where weight is (while others will remain the same) and to be like this:
<div class="weight-display">
<span>04/25/2011</span> <input type="text" value="100" /> <span>Save</span> <span>Cancel</span>
</div>
<div class="weight-display">
<span>04/27/2011</span> <span>150lbs</span> <span>Edit</span> <a href="http://foo.com">Delete</span>
</div>
etc..
So basically div has to "reload itself" and change content. Now I really need some very simple Javascript solution. Preferably I would like a solution with a hidden div beneath original one, so they just swap places when user clicks on EDIT and in a case if CANCEL is pressed to swap places again so original div with text is displayed...
Thanks,
Peter
<style type="text/css">
/* Normal mode */
.weight-display div.edit {display:none}
/* Editor mode */
.weight-edit div.show {display:none}
</style>
<div class="weight-display">
<button onclick="toggle(this)">Edit this!</button>
<div class="edit"><input type="text" value="Test" /></div>
<div class="show">Test</div>
</div>
<script type="text/javascript">
function toggle(button)
{
// Change the button caption
button.innerHTML = button.innerHTML=='Edit this!' ? 'Cancel' : 'Edit this!';
// Change the parent div's CSS class
var div = button.parentNode;
div.className = div.className=='weight-display' ? 'weight-edit' : 'weight-display';
}
</script>
What you suggest is basically correct. I would generate two div's one for display and one edit. The edit div will initially have display: none. When the Edit is clicked, hide the display div and show the edit div.
How about something like:
onClick event calls a function (EDITED to be a little smarter than my original brute force method):
function swapdivs ( id_of_topdiv, id_of_bottomdiv ) {
var topdiv = getRefToDiv( id_of_topdiv );
var bottomdiv = getRefToDiv( id_of_bottomdiv );
var temp = topdiv.style.zIndex;
topdiv = bottomdiv.style.zIndex;
bottomdiv = temp.style.zIndex;
}
Could that or similar work for you? Or am I missing some subtle yet crucial requirement?