I'm trying to emulate a feature on Wikipedia's mobile pages. If you visit http://en.m.wikipedia.org/wiki/Mammal and scroll down to the heading "Distinguishing Features," then click it, you'll see the down arrow (chevron) change to an up arrow.
I inserted the two choices into my header via spans...
<h2 id="where" class="H2Toggle" data-toggle="collapse" data- target=".Header2,.Where,#glyph2">
<span class="glyphicon glyphicon1 glyphicon-chevron-down"></span>
<span id="glyph2" class="glyphicon glyphicon2 glyphicon-remove-sign"></span>
</h2>
I then added a CSS style - span#glyph2 { display: none; }
Now only the first span displays by default, but when I click on the header BOTH spans display. So I need to figure out how to make the first span not display when I click the header, then reappear when I click it again.
I could do it for a particular screen size. For example, I could make one span or the other appear or not appear if the screen is 1,000 pixels wide or wider. But I need a CSS style (or JavaScript function) that makes a character appear/disappear according to whether or not a header has been clicked.
So I guess what I'm asking is "What's the name of the default active vs the inactive state in Bootstrap?"
Bootstrap will apply the collapsed class to the trigger when the element it controls is collapsed. Otherwise, no such class is applied. You can use this to write an appropriate CSS rule.
.only-collapsed { display: none; }
.collapsed .only-collapsed { display: inline; }
.collapsed .only-expanded { display: none; }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<div data-toggle="collapse" data-target="#target">Header <span class="only-collapsed">Expand</span> <span class="only-expanded">Collapse</span></div>
<div id="target" class="collapse in">Hello, world!</div>
Related
I am dealing with a legacy system and I can't rewrite the whole css.
So I find myself in need to toggle 2 classes on the same element when another one is clicked (imagine clicking on a button to hide/show a modal).
The following is the code for the modal.
Where the modal window is by default .hidden (without the class "visible") and on click it is .visible (without the class "hidden").
function openModal(modalID) {
document.getElementById(modalID)
.classList.toggle('hidden');
document.getElementById(modalID)
.classList.toggle('visible');
}
I agree to accept the
<a href="#"
onclick="openModal('tandcmodal')">
terms and conditions
</a>
of this website.
<div id="tandcmodal"
class="hidden">
Content of the modal
</div>
So, I believe there must be a way to toggle more than one class at once with .toggle().
Or isn't it?
Unfortunately, .toggle accepts only one argument: the one class name you wish to toggle. To be DRY, you'll have to iterate over an array of class names, or save the classList in a variable and call .toggle twice:
function openModal(modalID) {
const { classList } = document.getElementById(modalID);
classList.toggle('hidden');
classList.toggle('visible');
}
.hidden {
display: none;
}
.visible {
display: block;
}
I agree to accept the
<a href="#" onclick="openModal('tandcmodal')">
terms and conditions
</a> of this website.
<div id="tandcmodal" class="hidden">
Content of the modal
</div>
But note that usually there's no need for both a hidden and a visible class. Often you can have just a hidden class, and add it / remove it, letting the default display style take effect when hidden is not active:
function openModal(modalID) {
document.getElementById(modalID).classList.toggle('hidden');
}
.hidden {
display: none;
}
I agree to accept the
<a href="#" onclick="openModal('tandcmodal')">
terms and conditions
</a> of this website.
<div id="tandcmodal" class="hidden">
Content of the modal
</div>
Also note that inline attribute handlers behave very strangely, have escaping problems, and are generally considered to be quite poor practice - they should probably be avoided in almost all cases. Consider adding the event listener using Javascript instead:
document.querySelector('a').addEventListener('click', () => openModal('tandcmodal'));
function openModal(modalID) {
document.getElementById(modalID).classList.toggle('hidden');
}
.hidden {
display: none;
}
I agree to accept the
<a href="#">
terms and conditions
</a> of this website.
<div id="tandcmodal" class="hidden">
Content of the modal
</div>
I am creating a floating action button.
My code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<a href="#" class="float" id="menu-share">
<i class="fa fa-share my-float"></i>
</a>
<ul>
<li>
<i class="fa fa-facebook my-float"></i>
</li>
<li>
<i class="fa fa-google-plus my-float"></i>
</li>
<li>
<i class="fa fa-twitter my-float"></i>
</li>
</ul>
Fiddle Link: jsfiddle.net/7zkjas08.
Currently in my code when the user click the action button the popup appears and the user need to click or tap in somewhere on the screen to close the popup.
I want functionality like this: jsfiddle.net/r2hxbL5j
When the user click the button it shows the cross X closing sign. So the user can tap/click the cross sign and popup disappears.
Cool menu, and that you're trying to achieve that with CSS. I wanted to do that myself for a while. What bootstrap is using is something called pseudo elements to display the character. You just need to replace that character with something else on hover.
I inspected the #menu-share element to find all this out. Just add the following code, and it will work out.
/* when hovering the "a" tag, change the content in the pseudo-element "before" */
a#menu-share:hover > i::before{
content: '✕';
font-weight: bold;
}
I added the multiplication character. If you want to go with an X, I suggest that you change the font-family to a sans-serif, like Arial.
[edit]
It's IMHO impossible to add close functionality to the button with CSS, so it's needed to add the following functions:
/* Old code, but you need to put the next one below this one */
a#menu-share:hover + ul{
visibility: visible;
animation: scale-in 0.5s;
}
/* When giving the element focus (=clicking or tabbing to), close */
a#menu-share:focus + ul {
visibility: hidden;
}
/* Ignore any kind of pointer interaction */
.float > i {
pointer-events: none;
}
<a onmouseout="this.blur()" href="#" class="float" id="menu-share">
this means "this element", namely the a tag. blur() means remove focus from. I also needed to add .float > i syntax to the CSS in order for this to work.
I have a list of elements that can contain a large number of sub-elements.
For keeping the layout clearly arranged the element-long are by default invisible. When the user clicks the Show more entry the visibility of element-short and element-long is toggeled via JavaScript (.children('.element-short, .element-long').toggle()).
<div class="element-short" style="display: none;">
<p>Heading</p>
<ul> [truncated sub-element list] </ul>
<div>Show more</div>
</div>
<div class="element-long" style="display: block;">
<p>Heading</p>
<ul> [full sub-element list] </ul>
</div>
The problem is now that this changes the visibility for both, on-screen and printing. However for printing I want that all element-long sections are printed and the element-short section are always hidden, independently if the user has clicked the show more button before or not.
Bootstrap has a lot of visible-*-block classes, however these classes only target a special display size and not the general visibility in the web browser.
How can I show/hide a section via JavaScript only in the web browser, but keep it always visible or hidden while printing?
This seems to do the trick:
CSS:
#media print {
.element-short {
display: none !important
}
.element-long {
display: block !important
}
}
maybe you can use media query
#media print {
.show-me-when-print {
visibility: visible;
display: block;
}
}
#media screen {
.hide-me-in-screen {
display: none;
}
}
and add those class to your item
<div class="item hide-me-in-screen show-me-when-print">
show me when print
</div>
https://jsfiddle.net/3zqetL69/
1. Introduction
I am programming my first website using Bootstrap 3. And I use Html, Css and JavaScript.
2. The problem
I have made a hamburger menu which should only be visible in the extra small mobile grid (1-768px). The menu works perfect in this extra small grid. But when I scale up the browser window the hamburger menu keeps being visible in the small grid (769-992px).
I have tried to fiddle around with my Javascript and searched for answers but with no succes.
Here is the visual representation of the problem!
3. My Code
<html>
<head>
<script>
function toggle_visibility(id) {
var e = document.getElementById('hamburgermenu');
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
</script>
<style>
#hamburgermenu {
display: none;
position: absolute;
z-index: 1000000;
height: 100%;
width: 100%;
margin-top: 50px;
background-color: rgba(0,0,0,.7);
}
</style>
</head>
<body>
<!-- HTML BUTTON FOR HIDE AND SHOW -->
<button onclick="toggle_visibility('hamburgermenu');">
<span class="glyphicon glyphicon-option-horizontal"></span>
</button>
<!-- HTML BUTTON FOR HIDE AND SHOW -->
<!-- HTML MOBILE MENU -->
<div id="hamburgermenu" >
<ul class="mobilemenu">
<li>PROJECTEN</li>
<li>SKILLSET</li>
<li>STAGE</li>
<li>OVER MIJ</li>
<li>CONTACT</li>
</ul>
</div>
<!-- END HTML MOBILE MENU -->
</body>
inline style (style="display: block;") is still there so #hamburgermenu {display: none;} is useless.
There are many solutions, the easy one is to set a mediaquery with #hamburgermenu {display: none !important;}
You don't have to deal with the visibility issue manually when you use bootsrap.
Bootstrap has special helper classes which can be assigned to html elements in order to manage their visibility state in responsive apps.
You can read about it here: http://getbootstrap.com/css/
An example how you can manage a visible burger menu icon on small screens and an invisible on big screens could be as following:
<button class="visible-xs hidden-sm hidden-md hidden-lg">My Button</button>
That button would only be visible on small screens.
EDIT
To deal with the visiblity of your Menu I would suggest you to add classes to your Menu instead of using inline styling.
The pros of adding classes are:
You can easily style it in your stylesheet
It doesn't override any other stylings that come after this one
The cons of adding classes are:
You have to create a class in css ;) (which isnt a con)
Therefore I would go with this method to your click function
function toggle_visibility(id) {
var e = document.getElementById('hamburgermenu');
if(e.getAttribute('class') == 'my-class my-visible-class')
e.setAttribute('class', 'my-class')
else
e.setAttribute('class', 'my-class my-visible-class')
}
} // you also missed this closing bracket
I want to show and hide a div, but I want it to be hidden by default and to be able to show and hide it on click. Here is the code that I have made :
<a class="button" onclick="$('#target').toggle();">
<i class="fa fa-level-down"></i>
</a>
<div id="target">
Hello world...
</div>
Here I propose a way to do this exclusively using the Bootstrap framework built-in functionality.
You need to make sure the target div has an ID.
Bootstrap has a class "collapse", this will hide your block by
default. If you want your div to be collapsible AND be shown by
default you need to add "in" class to the collapse. Otherwise the
toggle behavior will not work properly.
Then, on your hyperlink (also works for buttons), add an href
attribute that points to your target div.
Finally, add the attribute data-toggle="collapse" to instruct
Bootstrap to add an appropriate toggle script to this tag.
Here is a code sample than can be copy-pasted directly on a page that already includes Bootstrap framework (up to version 3.4.1):
Toggle Foo
<button href="#Bar" class="btn btn-default" data-toggle="collapse">Toggle Bar</button>
<div id="Foo" class="collapse">
This div (Foo) is hidden by default
</div>
<div id="Bar" class="collapse in">
This div (Bar) is shown by default and can toggle
</div>
Just add water style="display:none"; to the <div>
Fiddles I say: http://jsfiddle.net/krY56/13/
jQuery:
function toggler(divId) {
$("#" + divId).toggle();
}
Preferred to have a CSS Class .hidden
.hidden {
display:none;
}
Try this one:
<button class="button" onclick="$('#target').toggle();">
Show/Hide
</button>
<div id="target" style="display: none">
Hide show.....
</div>
I realize this question is a bit dated and since it shows up on Google search for similar issue I thought I will expand a little bit more on top of #CowWarrior's answer. I was looking for somewhat similar solution, and after scouring through countless SO question/answers and Bootstrap documentations the solution was pretty simple. Again, this would be using inbuilt Bootstrap collapse class to show/hide divs and Bootstrap's "Collapse Event".
What I realized is that it is easy to do it using a Bootstrap Accordion, but most of the time even though the functionality required is "somewhat" similar to an Accordion, it's different in a way that one would want to show hide <div> based on, lets say, menu buttons on a navbar. Below is a simple solution to this. The anchor tags (<a>) could be navbar items and based on a collapse event the corresponding div will replace the existing div. It looks slightly sloppy in CodeSnippet, but it is pretty close to achieving the functionality-
All that the JavaScript does is makes all the other <div> hide using
$(".main-container.collapse").not($(this)).collapse('hide');
when the loaded <div> is displayed by checking the Collapse event shown.bs.collapse. Here's the Bootstrap documentation on Collapse Event.
Note: main-container is just a custom class.
Here it goes-
$(".main-container.collapse").on('shown.bs.collapse', function () {
//when a collapsed div is shown hide all other collapsible divs that are visible
$(".main-container.collapse").not($(this)).collapse('hide');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
Toggle Foo
Toggle Bar
<div id="Bar" class="main-container collapse in">
This div (#Bar) is shown by default and can toggle
</div>
<div id="Foo" class="main-container collapse">
This div (#Foo) is hidden by default
</div>