I have a series of boxes/blocks of content on a form that need to just show the title of the box, with a 'View More' button below it. When a user clicks View More, the box should expand vertically to show its contents. Also, when another 'View More' is clicked, any other open boxes need to close.
How can I accomplish this with jQuery? I thought maybe I could use the Accordion plugin, but that sounds like it only works with list displays.
Example:
Box TitleView More!
*user clicks
Box Title
Content
Content
Content
Content
Close
The jQuery UI Accordion plugin doesn't rely on lists, you can use markup like this:
<div id="accordion">
<h3>First header</h3>
<div>First content</div>
<h3>Second header</h3>
<div>Second content</div>
</div>
http://jqueryui.com/demos/accordion/ Look at the theming tab, it doesn't use lists.
Related
I have a pretty complex modal in which my users can dynamically add rows (== options) in which there are multiple select elements. These select's open customized dropdown menus with the different options.
The problem I'm facing:
1 - a user adds enough options to make the containing div overflow, and it becomes necessary to scroll through all the rows but always within the modal
2 - the user clicks on a select input, which opens the options' dropdown
3 - the user somehow scrolls through the rows
Expected:
The options' dropdown remains anchored to the select input
Actual:
The dropdown keeps its 'absolute' position relative to the modal, meaning that it appears to scroll along with the rest of the div, floating above the other rows.
The input is in a form contained in the modal, while the select dropdown is at the very bottom of the page:
<body>
<div>
<div id="modal">
<form>
<input type='select' id="my-select">
</input>
</form>
</div>
</div>
<div>
<!-- Dropdown attached to #my-select -->
<div id="dropdown">
<div>First option</div>
</div>
</div>
</body>
I'm guessing there's no easy way to achieve what I want with only css? If that is the case, what kind of JS sorcery would be needed?
Thanks for your help!
I'm trying to initiate a Semantic UI Dimmer with markup like so:
<p id="move">Move me</p>
<div class="ui dimmable">
<h3 class="ui header">
Overlayable Section
</h3>
<div class="ui dimmer"></div>
</div>
and js like so:
$('.ui.dimmable')
.dimmer(
{on: 'click'},
'add content', $('#move'))
;
There is apparently a behaviour called 'add content' that should detach an element from the DOM and add it into the dimmer.
Does anyone have ideas on how to make this work?
Note - the above does intitiate the dimmer on click of '.ui.dimmable', I just can't grasp how to use the 'behaviours' Semantic UI Docs mention, and can't find any examples.
Thanks!
The dimmer content is black by default, so you need to make your #move element white. I tried change it to h2 with .ui.inverted.header
Then you need to add your desired content to your dimmer with this:
$(".ui.dimmable").dimmer("add content", $("#move"));
And configure it to show on click
$(".ui.dimmable").dimmer({
on: "click"
});
Try it on this JSFiddle
Hej folk,
actually I develope a small browsergame for my personal use.
The user should do scroll with his mouse over the map (like Google Maps) which I realized with utterscroll.js.
On the second the user should can build structures, delete and upgrade them on a fixed DIV-Grid. The number of the grid is the same like the position id of the place the user can build something.
Also for the build menu I need to href the grid DIVs but when I do this utterscroll can't scroll anymore and I don't know why it does it. :/
HTML
<div class="viewport">
<div id="grid">Grid 1</div>
<div id="grid">Grid 2</div>
<div id="grid">Grid 3</div>
<div id="grid">Grid 4</div>
...
</div>
"InGame"
All grids are linked DIVs (see above)
When I try to scroll with the mouse I "drag and drop" the link instead of scrolling trough the screen/map
screenshot
I only use the default utterscroll.js.
I hope you guy's can help!
rumpetroll
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>
I have a page that uses jQuery tabs. Each tab contains one or more jQuery accordions, which are generated dynamically, in addition to other stuff. Example:
<div id="tab1" class="tab">
<div>
Some stuff
</div>
<div class="accordion">
I am an accordion
</div>
</div>
<div id="tab2" class="tab">
<div class="accordion">
I am also an accordion
</div>
More stuff
<div class="accordion">
I am also an accordion
</div>
</div>
I would like the first accordion in each tab to remain open, while the others (if there are any) are collapsed. I have tried:
$('.tab .accordion:first')
which only selects the first accordion on the page (obviously). I also tried:
$('.tab .accordion:first-child')
This selects the first accordion in tab2 but it doesn't select the one in tab1 because there's some stuff above it. I've also tried:
$('.tab > .accordion').filter(':first-child')
$('.tab').children('.accordion:first-child')
Along with about every combination of selectors I can think of. At this point my brain is fried. Before you point me to a duplicate question, none of these are asking the same question exactly:
JQuery Tab each Selected tab first text box focus
jquery select first child with class of a parent with class
jQuery selector for each first element on every parent
jQuery Selecting the first child with a specific attribute
The difference in my case is I have very little control over what content shows up in these tabs.
I'd suggest:
$('.tab').find('.accordion:first');
JS Fiddle proof-of-concept.
Try this:
$('.accordion:first', '.tab')