I am using jQuery to hide some content in collapsible panels, to do this I am using the following mark up and script:
HTML
<div class="trigger">Collapsible Header 1 - Click to toggle</div>
<div class="panel">
content 1
</div>
<div class="trigger">Collapsible Header 2 - Click to toggle</div>
<div class="panel">
content 2
</div>
jQuery:
$(document).ready(function() {
$(".trigger").click(function(){
$(this).next(".panel").slideToggle("medium");
});
});
A fiddle of it here:
http://jsfiddle.net/LkTf8/1/
This works great, however I am trying to start with the panels collapsed. Currently, they are open, not closed. What is the best approach to start with the panels collapsed?
set .panel to display: none
FIDDLE
Related
I am having a problem with make "table of content" expand and collapse with a button in Bootstrap 4.
Here is my code:
https://codepen.io/nht910/pen/RwwwyKB
Snippet:
<div class="main-wrapper col-12">
<div class="post-wrapper">
<div class="post-body d-flex">
<div class="post-content">
<p>...</p>
</div>
<div class="post-toc">
<!-- this table of content i use Boostrap-TOC to auto generate: https://afeld.github.io/bootstrap-toc-->
<nav class="sticky-top" id="toc"></nav>
</div>
</div>
</div>
</div>
Can you guys please help me to put "table of contens" inside a colapse button and when clicked it we have animation like the images below.
Thank you guys so much.
To animate the side menu you have to make a transformation and slide the menu using translateX(100%);. You can then add a transition: all 300ms; to have a sliding effect.
You will also need to change the side menu width as you are sliding, so the content fills the space of the side menu.
I think I achieved the effect you wanted, Example below:
https://codepen.io/diogoperes/pen/NWWWMYW
I added some animation with jQuery, as well as added the button and some Bootstrap classes, to bring your main content at the center.
Here's the jQuery method:
$(function() {
$("#toc-button").click( function() {
$(".post-toc").stop(true).animate({width:'toggle'}, 400);
});
});
Example here: https://codepen.io/evelyng/pen/XWWWqYg
I'm working on creating a accordion that collapses/opens when the user hover's their mouse over the title of the accordion. The code I have so far works to some degree. The problem is that the accordion always opens when the mouse enters but is sometimes really inconsistent in closing (especially if the user moves their mouse very fast).
Here is a link to the website http://infotree.co.uk/ (the accordion is on the left) to visualize the problem - move mouse fast over the left accordion.
And here is my code for just one of the accordion tabs in the html doc:
<div class="panel panel-default">
<div class="panel-heading" role="tab">
<h4 class="panel-title accordionTitles1" id="headOne1"><a data-toggle="collapse" data-parent="#accordion1" href="#collapseOne1">Search</a></h4>
</div>
<div id="collapseOne1" class="panel-collapse collapse in">
<div class="panel-body">Search to find specific content to learn about.</div>
</div>
</div>
And the java script to go with it:
$(document).ready(function() {
$("#headOne1").hover(function() {
$('#collapseOne1').collapse('show');
}, function() {
$('#collapseOne1').collapse('hide');
}
);
});
Going through the previous accordion question you mentioned (Bootstrap Collapse accordion on hover) I found one person's answer relating to the problem I was having which made me realize the exact cause.
The problem is to do with the animation timing, so if you leave the collapse area BEFORE the collapse animation is finish jquery never runs the collapse function. The solution is to use queue and dequeue methods to make sure all the functions run properly and in the correct order.
Here is the HTML code for one tab:
<div class="panel panel-default">
Search
<div id="sidebarContent1" class="panel-collapse collapse">
<div class="panel-body">Search to find specific content to learn about.</div>
</div>
</div>
And the java script for the respective tab:
$(document).ready(function() {
var button1 = $("#sidebarButton1");
var content1 = $("#sidebarContent1");
button1.mouseenter(function() {
content1.queue('collapsequeue',function(){
content1.collapse('show');
});
if (!content1.hasClass("collapsing")) {
content1.dequeue("collapsequeue");
}
});
button1.mouseleave(function() {
content1.queue('collapsequeue',function(){
content1.collapse('hide');
});
if (!content1.hasClass("collapsing")) {
content1.dequeue("collapsequeue");
}
});
content1.on("shown.bs.collapse hidden.bs.collapse", function(){
content1.dequeue("collapsequeue");
});
});
The .queue() names a queue AS WELL as adds functions to a queue, .dequeue() simply RUNS the queue. The code isn't completely perfect as it goes against DRY coding (much like the response I found in Bootstrap Collapse accordion on hover) - this is because I am not able to use the href tag in a element since I need that so that I can link to different webpages rather than the div element containing the hidden content.
Any idea on making the code shorter/efficient? I have to repeat the JS for every tab and I feel like there is probably a better way to do this that what I have come up with.
This question has been answered before: Bootstrap Collapse accordion on hover
If you don't want/need the fancy animation, you could also use pure CSS:
https://jsfiddle.net/vvu5ozh1/4/
With CSS transitions you could even do the animation, but that would be a bit more complicated.
<div class="panel">
<div class="title">
Title1
</div>
<div class="content">
COntent1
</div>
</div>
<div class="panel">
<div class="title">
Title2
</div>
<div class="content">
COntent2
</div>
</div>
.panel:hover .content {
display:block;
}
.content {
display: none;
}
I have a simple accordion built on the jQuery UI plug-in. The plug-in works as it should but I'd like to add a class onto the clickable element (that opens/closes the content) so that I can style it differently.
Here's a crude but functional CodePen version of the functionality:
http://codepen.io/moy/pen/dXObjX
This is the structure of my mark-up:
<div class="mount accordion">
<div class="hgroup accordion__toggle">
<h3 class="hgroup__title">Course 1</h3>
</div>
<div class="accordion__content">
<!-- Hidden content in here -->
</div>
</div>
And my javascript:
$(document).ready(function($) {
$('.accordion').find('.accordion__toggle').click(function(){
// Expand or collapse this panel
$(this).next('.accordion__content').slideToggle(200);
});
});
Currently all panels are open my default unless a class of .hidden is added to .accordion__content.
Thanks, hope someone can help with this!
Try something like below:
$(document).ready(function($) {
$('.accordion').find('.accordion__toggle').click(function(){
// Expand or collapse this panel
$(this).next('.accordion__content').slideToggle(200);
//toggle class
$(this).toggleClass('classname')
});
});
I have the following
<body>
<div class="sidebar"></div>
<div class="main">
<div class="page-1">
<p>Page 1</p>
<button id="btn-page2">Go to Page 2</button>
</div>
<!-- Other Pages -->
<div class="page-2">
<p>Page 2</p>
</div>
</div>
</body>
I am trying to follow the same principle of JQuery mobile by having all the pages in a single HTML document.
On page load, only the div with class page-1 should be displayed. However on clicking the button with id btn-page2, the second page should be displayed instead of the first one.
I figured I could add an .active-page class on the visible page with a display:block as attribute.
However, I also want to slide the second page from the bottom smoothly.
Any suggestions?
You can have a look at this blog.
http://mindfiremobile.wordpress.com/2013/07/16/smooth-page-transition-on-mobile-devices-within-single-html-page/
This demonstrates the way to add slide page effect using css3.
You can use the same concept to have the page slide form bottom to top.
you can create a css3 class which will slide any page from bottom and add it to the page div based on the button clicked
I want to create something like tabs.
So I have tab itself as
<div class="tab" >Tab1</div>
<div class="tab" >Tab2</div>
<div class="tab" >Tab3</div>
and page content for each tab as
<div class="pagecontent" >pagecontent for Tab1</div>
<div class="pagecontent" >pagecontent for Tab2</div>
<div class="pagecontent" >pagecontent for Tab3</div>
How to make js function in "clever way" so by pressing "tab1", "pagecontent for Tab1" shows and other 2 get hidden? Also, number of tabs varies from page to page.
$(function() {
$('.pagecontent').not(':eq(0)').hide();
$('.tab').click(function() {
$('.pagecontent').hide();
$('.pagecontent').eq($(this).index()).show();
});
});
Please see a working demo here > http://jsfiddle.net/Yce32/
Try jQuery UI Tabs:
http://jqueryui.com/tabs/
It's "clever way" - you will have add\delete\order tabs in a box