I just joined forum moments ago when I got real frustrated. I've been trying to work out a problem I found but haven't been able to solve myself.
So i'm building expand/collapse style menu where I have two items (two titles). When I click one of the titles, the item and its content is being expanded. When I click it again, it gets collapsed. It's just the way I want it to work.
The problem is that 'master' button which works as "Show all" or "Hide all". It isn't working like I want it to work. So when I click it once, all items are displayed and when I click it again all items are being hidden.
The problem is when I click one of the items open and THEN click "Show all" button, then that already opened element is being hid and element being before hidden is now being shown. How to proceed from here?
My code is here:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<!-- BOOTSTRAP CORE STYLE -->
<link href="assets/css/bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<button type="button" class="btn btn-primary">Show all</button>
<br>
<script>
$(document).ready(function(){
$(".btn-primary").click(function(){
$(".panel-collapse").collapse('toggle');
var $this = $(this);
$this.toggleClass('.btn-primary');
if($this.hasClass('.btn-primary')){
$this.text('Hide all');
} else {
$this.text('Show all');
}
});
});
</script>
<br>
<div class="container">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">First collapse</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">First content</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse2">Second collapse</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">Second content</div>
</div>
</div>
</div>
</div>
<!--CORE SCRIPTS PLUGIN-->
<script src="assets/js/jquery-1.11.1.min.js"></script>
<!--BOOTSTRAP SCRIPTS PLUGIN-->
<script src="assets/js/bootstrap.js"></script>
</body>
</html>
Please note: There are few scripts that have local paths because I couldn't get global links (hyperlinks) to work here... don't really know why.
I know everything here is pretty messed up, i'm not a native English speaker but I hope you understand what I'm struggling with.
Thanks in advance. Any help is appreciated! :)
try next code :
$(document).ready(function(){
let $button =$(".btn-primary");
$button.click(function(){
$(".panel-collapse").toggle()
var $this = $(this);
$this.toggleClass('.btn-primary');
if(!$this.hasClass('.btn-primary')){
$this.text('Hide all');
} else {
$this.text('Show all');
}
});
});
But I reccomend use custom class or id for identify buttons or others elements, because page can has many elements with similar bootstraps classes.For toogle text in button you need use variable.
Related
I've found lots of answers for toggling divs, but none are quite doing what I'm looking for. I want to have 2 buttons (grid & list views). When the page loads, the grid div is visible. If someone clicks the list view button, the grid div will go to display: none, and the list div will display:block. If you happen to click the list view button again while the list div is already displayed, nothing would happen. But if you click on the grid view button, the divs would toggle again, and vice versa.
All I've managed to accomplish is that clicking on the "list view" button displays that div, but it does not make the grid view disappear. Only clicking on the grid view button makes the grid disappear. I'm sure there's a logic I'm completely missing here, and I apologize for having a fried brain right now. But I'm just getting frustrated.
Here's my code:
jQuery(function(){
jQuery('.showSingle').click(function(){
var objdiv = $('#div'+$(this).attr('target'));
var toggleDisplay = false;
if(objdiv.css('display')=="none"){
toggleDisplay = true;
}
jQuery('.targetDiv').hide();
jQuery('#div'+$(this).attr('target')).toggle(toggleDisplay);
});
});
<link href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="d-grid gap-2 d-md-block">
<a class="btn btn-primary showSingle" target="1" data-bs-toggle="button" aria-pressed="true"><i class="fas fa-th-large"></i></a>
<a class="btn btn-primary showSingle" target="2" data-bs-toggle="button" aria-pressed="false"><i class="fas fa-list"></i></a>
</div>
<div id="div1" style="display: block;">
Grid View Here
</div>
<div id="div2" style="display: none;">
List view here
</div>
Thanks in advance.
The logic you're using is more complex than it needs to be. All you need to do when a button is clicked is hide all the #divN elements, which can be done most simply by adding a common class to them, then showing the one related to the button which was clicked.
To target the div related to the button you can put the id selector in the href attribute of the a element. Try this example:
jQuery($ => {
$('.showSingle').click(e => {
e.preventDefault();
$('.content').hide();
let targetSelector = $(e.currentTarget).attr('href');
$(targetSelector).show();
});
});
.content { display: none; }
#div1 { display: block; }
<link href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="d-grid gap-2 d-md-block">
<a class="btn btn-primary showSingle" href="#div1" data-bs-toggle="button" aria-pressed="true"><i class="fas fa-th-large"></i></a>
<a class="btn btn-primary showSingle" href="#div2" data-bs-toggle="button" aria-pressed="false"><i class="fas fa-list"></i></a>
</div>
<div class="content" id="div1">Grid View Here</div>
<div class="content" id="div2">List view here</div>
I'm currently working on a blog layout with a main div and a side bar with links. I want each link to change the content of the main div.
I tried using toggle and html.
Here's the main class and the content of each link:
<div id="main"></div>
<div id="works">
These are my works.
</div>
<div id="info">
About me.
</div>
<div id="tags">
Tag list.
</div>
And the side bar:
<div id="mainlink">
<button class="linkd" id="butt1"> works </button>
<button class="linkd" id="butt2"> info </button>
<button class="linkd" id="butt3"> Tags </button>
</div>
So when I click on the button "works" I want the content of that div into the main div.
Here's the snippet of the JQuery (that doesn't work):
$(function(){
$('#butt1').click(function() {
$('#main').html($('#works'));
$('#works').toggle();
$('#info').hide();
$('#tags').hide();
});
$('#butt2').click(function() {
$('#main').html($('#info'));
$('#info').toggle();
$('#works').hide();
$('#tags').hide();
});
$('#butt3').click(function() {
$('.mainp').html($('#tags'));
$('#tags').toggle();
$('#info').hide();
$('#works').hide();
});
});
Note: on my CSS I have the display: none as well.
I think it is the easy way to show and hide divs, by assigning a relation to the buttons using HTML5's data attribute (here their ids are used in data-target attribute). See the snippet below...
$(function(){
$('[data-target]').on('click', function(){
var target = $(this).data('target');
$(target).siblings().hide().end().show();
});
});
#main > div:not(:first-child) {display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mainlink">
<button class="linkd" data-target="#works"> works </button>
<button class="linkd" data-target="#info"> info </button>
<button class="linkd" data-target="#tags"> Tags </button>
</div>
<div id="main">
<div id="works">
These are my works.
</div>
<div id="info">
About me.
</div>
<div id="tags">
Tag list.
</div>
</div>
I'm having some trouble making a working show div and I just can't get it.
So I have the following:
function GetCaptcha() {
$(".panel-captcha").fadeIn(500);
}
Get
<div class="panel-captcha">
TEXT
</div>
The div has the display:none tag.
It works very well, but I have one problem. I need to have many divs inside the same page ( not the same, it may change from database ). If I have 3 or 4 panels, when I click the button it will show them all instead only the div where I have the link to show.
Anyone can help me? Thanks.
Complete HTML file...
<div class="col-md-4">
<div class="panel panel-blue" data-widget='{"draggable": "false"}'>
<div class="panel-heading">
<h2>TEXT</h2>
<div class="panel-ctrls">
<i class="ti ti-eye"></i>
<!-- BUTTON TO SHOW CAPTCHA -->
</div>
</div>
<div class="panel-body">
<small>Other Text...</small>
</div>
<div class="panel-footer">
<div class="tabular">
<div class="tabular-row tabular-row">
<div class="tabular-cell">
<span class="status-total"><strong>More Text...</strong></span>
</div>
<div class="tabular-cell">
<span class="status-pending">Other Text...</span>
</div>
</div>
</div>
</div>
<div class="panel-captcha">
<!-- HIDDEN DIV -->
<div class="tabular-cell">
HIDDEN TEXT
</div>
</div>
<!-- END HIDDEN DIV -->
</div>
</div>
You can pass the reference of element to click handler, then use .next()
Script
function GetCaptcha(elem) {
$(elem).next(".panel-captcha").fadeIn(500);
}
.panel-captcha {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Get
<div class="panel-captcha">
TEXT
</div>
As you are using jQuery bind event using it.
HTML
Get
<div class="panel-captcha">
TEXT
</div>
Script
$(function() {
$('.captcha').on('click', function () {
$(this).next(".panel-captcha").fadeIn(500);
});
});
EDIT
As per updated HTML use
function GetCaptcha(elem) {
$(elem).closest('.panel').find(".panel-captcha").fadeIn(500);
}
document.getElementById("nextOneButton").onclick = function(){
document.getElementById("mainFrameOne").style.display="none";
document.getElementById("mainFrameTwo").visibility="visible";
}
//mainFrameTwo is initially set hidden in terms of visibillity
//nextOneButton is on top of the mainFrameOne in terms of position, when //clicked it should move to next frame. Some what like a slide show
Really you need a button so you can bind your function to the onclick event. Here is a possible solution:
<html>
<head>
<title></title>
<script>
function myFunction() {
document.getElementById("mainFrameOne").style.display="none";
document.getElementById("mainFrameTwo").style.display="block";
}
</script>
</head>
<body>
<div id="mainFrameOne">
<p>mainFrameOne</p>
</div>
<div id="mainFrameTwo" style="display:none;">
<p>mainFrameTwo</p>
</div>
<button onclick="myFunction()">Click me</button>
</body>
</html>
Alternatively, you could use anchor tags to remove the need for the button:
<html>
<head>
<title></title>
<script>
function myFunction() {
document.getElementById("mainFrameOne").style.display="none";
document.getElementById("mainFrameTwo").style.display="block";
}
</script>
</head>
<body>
<a id="mainFrameOne" onclick="myFunction()" href="#">
mainFrameOne
</a>
<a id="mainFrameTwo" href="#" style="display:none;">
mainFrameTwo
</a>
</body>
</html>
<div id ="activeContent" >
<div id ="mainFrameOne"> <!-- POSITION MATTERS WHEN YOU WANT TO DO THE DISSAPEARING ACT WITH JAVASCRIPT -->
<img src="person.gif" id ="person" width="1350" height ="900">
<div id ="backOneButton"> <h4 class ="directionButtonsText"> Back </h4> </div>
<div id ="nextOneButton"> <h4 class ="directionButtonsText"> Next </h4> </div>
<div id = "mainFrameOneTitleBar">
<h3 id ="jakesLemonade">Jake's Lemonade Stand</h3>
</div> <!-- End of MainFrameTitleBar -->
<h3 id = "firstTextJake"> This is Jake, the owner of a small lemonade stand.<br> Like many other small business owners, Jake wants to know <br>what the future holds for him. CloudFin can tell him exactly that. </h3>
</div> <!-- End of MainFrameOne Div-->
<div id ="mainFrameTwo">
<div id ="backTwoButton"> <h4 class ="directionButtonsText"> Back </h4> </div>
<div id ="nextTwoButton"> <h4 class ="directionButtonsText"> Next </h4> </div>
<div id = "mainFrameTwoTitleBar">
<h3 id ="lemsLemons">When life gives you lemons, Make lemonade</h3>
<script type="text/javascript">
</script>
</div> <!-- End of MainFrameTitleBar -->
<h3 id = "secondTextJake"> How much does each lemon cost?</h3>
</div> <!-- End of MainFrameTwo -->
</div> <!-- End of ActiveContent Div -->
If something is not working you can consider using addEventListener.
Example:
document.getElementById('button').addEventListener('click', changeVisibility(), null);
function changeVisibility()
{
document.getElementById('divToHide').style.display = "none";
document.getElementById('divToShow').style.display = "block";
}
I know that this has been asked several times but I cannot get any of the answers to work in my code.
I am using Bootstrap 3 panels and collapse to show adverts. In the basic view, only the advert heading is shown together with a chevron down glyph to indicate that there is more information.
When the user clicks on the chevron-down, the main panel body containing the advert text is shown. At this point, I would like the chevron-down glyph to change to a chevron-up glyp.
I am using the following code:
<script language="JavaScript" type="text/javascript">
$('#Advert').on('show.bs.collapse', function(){
$('#Glyp-Advert').removeclass('glyphicon glyphicon-chevron-down').addclass('glyphicon glyphicon-chevron-up');
});
$('#Advert').on('hide.bs.collapse', function() {
$('#Glyp-Advert').removeclass('glyphicon glyphicon-chevron-up').addclass('glyphicon glyphicon-chevron-down');
});
</script>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a id="Heading-Advert" data-toggle="collapse" data-parent="#accordion" href="#Advert">
Heading
<span class="pull-right"><span id="Glyp-Advert" class="glyphicon glyphicon-chevron-down"></span></span>
</a>
</h4>
</div>
<div id="Advert" class="panel-collapse collapse">
<div class="panel-body">
Advert text<br />
</div>
</div>
</div>
This succeeds in displaying the main advert panel but will not change the glyph.
Any help would be appreciated. Note that the page will contain several adverts; so I intend to repeat the above code several times on the page but change the id's to contain the word 'Advert1' or 'Advert2' etc instead of just 'Advert'.
JavaScript is case-sensitive.
As such, your calls to removeclass and addclass are invalid because removeClass and addClass are the actual method names (notice the capital 'C' in each name).
Your code works otherwise. See http://jsfiddle.net/wilsonjonash/SXYZ2/
The answer from Jonathan Wilson was spot on BUT it failed to mention that the script needs to be AFTER the html and not before in my sample code.
Therefore, the correct code should be
<div class="panel panel-default"><div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a id="Heading-Advert" data-toggle="collapse" data-parent="#accordion" href="#Advert">
<span class="pull-right"><span id="Glyp-Advert" class="glyphicon glyphicon-chevron-down"></span></span>
Heading
</a>
</h4>
</div>
<div id="Advert" class="panel-collapse collapse">
<div class="panel-body">
Advert text<br />
</div>
</div>
</div>
<script language="JavaScript" type="text/javascript">
$('#Advert').on('show.bs.collapse', function(){
$('#Glyp-Advert').removeClass('glyphicon glyphicon-chevron-down').addClass('glyphicon glyphicon-chevron-up');
});
$('#Advert').on('hide.bs.collapse', function() {
$('#Glyp-Advert').removeClass('glyphicon glyphicon-chevron-up').addClass('glyphicon glyphicon-chevron-down');
});
</script>
You don't necessarily need Javascript. You can do this with a few CSS styles. Here's how I've done it.
Make sure all your panel-title a links have this class: accordion-toggle
Add this CSS to your style sheet:
.
/* symbol for open panels */
.panel-heading .accordion-toggle:after {
font-family: 'FontAwesome';
content: "\f068";
float: right;
color: #474747;
}
/* symbol for closed panels */
.panel-heading .accordion-toggle.collapsed:after {
content: "\f067";
}
Note, I've used FontAwesome here, but you can change the font and characters to whatever you need, such as up and down chevrons.