materializecss collapsible panel with a different html structure - javascript

I'm trying to create a custom collapsible panel using materialize but I don't know why the button is not triggering and showing the panel body. I have created a fiddle with my custom example that doesn't work and one materilaize example with their structure that works.
From my inspect I saw that the active class is not being added on panel body while clicking on panel header which is quite strange.
So if anyone can help me with that please ... modifying materialize components is like a pain in the ass !
<div class="collapsible">
<div class="box">
<div class="1left">Left</div>
<div class="2center">Center</div>
<div class="3right">Right
<a class="collapsible-header">Colapse header</a>
</div>
</div>
</div>
<div class="collapsible-body">
This should be the body collapsed
</div
http://jsfiddle.net/zt5515zt/90/

In Materialize you need both collapsible-header and collapsible-body at the same level in order to make Collapsible work.
Just Change the level of you collapsible-body as shown below and it will work.
<a class="collapsible-header">Colapse header</a>
<div class="collapsible-body">
This should be the body collapsed
</div>
Hope this helps you solve the problem.

Related

How to find bootstrap of a particular section

I have copied a menu from a responsive HTML template, I pasted it to another template which is also responsive, but when the device is changed to mobile, the menu is not properly aligned.
I don't know how to extract the bootstrap of the menu only from its original template.
Here is the code:
<section id="food-menu" class="content-area bg-home-food-menu">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="section-title text-center">
<h2>Discover our menu</h2>
<div class="clear">
You are missing the responsive styles for your code. Try adding the media queries for your Mobile view.That will fix the issue you are facing.

Change column class of div in bootstrap

I've found a number of similar questions but cannot seem to get their solutions to work for me so hopefully posting the specific code will help.
I use Caspio datapages deployed on html pages. On an html page I have a full 12 column div that I need to change to a 9 column div when a link is clicked on. This is because I have a collapsed 3 column div that is opened when the link is clicked.
So what i need:
1) upon page load 3 column div collapsed, 12 column div visible.
2)user clicks link and 3 column div is visible and 12 column div changes
to 9 column div so it is moved to the right of the 3 column div
instead of below it.
The Caspio datapages can get messed up if the css is intense (is random when it happens so I can't describe it in detail) so I need to keep it as simple as possible. If I could change div class="col-md-12" to div class="col-md-9" on the link click that would be great. I've seen other posts with changing column classes but I cannot seem to get them to work.
Here's the main code I'm working with:
<div class="col-md-3" style="overflow-x:hidden;overflow=y:hidden;">
<div id="newcomment" class="collapse">
<caspio deploy code for datapage1>
</div>
</div>
<div class="col-md-12">
<div>
<caspio deploy code for datapage2>
</div>
</div>
<a class="btn page-action" href="#newcomment" style="color:green;" data-toggle="collapse"><i class="fa fa-plus" aria-hidden="true"></i> Add Comment</a>
So if I can change div class="col-md-12" to div class="col-md-9" upon the #newcomment link click that should probably do it. Many thanks in advance-
There are several ways you can do this. Here is one...
$('#btnSwitch').click(function(){
$('.col-md-3').toggleClass('hide');
$('#right').toggleClass('col-md-12 col-md-9');
})
HTML
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
page1
</div>
<div class="col-md-9" id="right">
page2
</div>
</div>
<br>
<button class="btn btn-lg" id="btnSwitch">Switch</button>
</div>
http://www.codeply.com/go/pFNLZqoZUV

making accordion panel open when clicking on header rather than just title

I found this stackoverflow questions which looks to be the same problem I am having. That is the default behavior is for angular ui-bootstrap accordion to only open when you click on the panel title and not anywhere else on the panel.
ng-click on accordion panel header
The solutions presented seems to get out of sync when one time clicking on the panel and then clicking on the title. Sometimes you have to click twice to get it back in sync. I noticed this snippet on the documentation, To use clickable elements within the accordion, you have override the accordion-group template to use div elements instead of anchor elements, and add cursor: pointer in your CSS.
Can someone provide and example of using div tags instead of anchor elements?
You have to customise the template for accordion-group to use clickable links otherwise it will trigger unexpected routing. You can modify the template as below:
<script id="uib/template/accordion/accordion-group.html" type="text/ng-template">
<div role="tab" id="{{::headingId}}" aria-selected="{{isOpen}}" class="" ng-keypress="toggleOpen($event)">
//this is previously <a role="tab"> - replace it with div
<div role="button" style="border-top:1px solid #e6e6e6" data-toggle="collapse" href aria-expanded="{{isOpen}}" aria-controls="{{::panelId}}"
tabindex="0" ng-click="toggleOpen()" uib-accordion-transclude="heading" ng-disabled="isDisabled"
uib-tabindex-toggle><span uib-accordion-header ng-class="{'text-muted': isDisabled}">{{heading}}</span>
</div>
</div>
<div id="{{::panelId}}" aria-labelledby="{{::headingId}}" aria-hidden="{{!isOpen}}" role="tabpanel"
class="panel-collapse collapse" uib-collapse="!isOpen">
<div class="" ng-transclude></div>
</div>
</script>
You can put this template in your view where you are using accordion. This will override your default accordion-group template that comes from angular ui bootstrap tpls library.

Tabs navigation using HTML5

I making page with tabs . And i ahve to make tabs inside tabs which Right now i am making it as button as I am not getting how to make it as tabs. Can anyone suggest me how to make it pls.
Below is my piece of code;
<div id="container">
<!-- Start Tabs !-->
<div class="tab-container">
<div id="c1">
Projects <!-- This is your actual tab and the content is below it !-->
<div class="tab-content"> <!-- tab-container > div > div in the CSS !-->
<button id="create">Create</button>
<button id="edit">Edit</button>
</div>
</div>
just make it with the help of css in short give it backgroud-color or backgroud-image, gradient on button and more and more you can also place div also at the place of button. As you want that's it .... its tutorials also present easily

Expand/Collapse All with a nested accordion and non-accordion item: BOOTSTRAP

I'm about 2 months new to programming and Twitter Bootstrap, so please be kind!
I've done a lot of digging and searching, but am not sure I am using the correct terms so I figure I'd ask directly.
I am trying to create an Expand/Collapse all button that will expand or collapse all items under a Title Header. The items under a title header include a text piece and an image. I want to be able to expand/collapse the text piece by clicking on the Title Header. I want to be able to expand/collapse the text AND the image by clicking on the button.
The problem is: I want to button to expand/collapse everything regardless if the text piece is expanded or collapsed.
This is the jsfiddle: http://jsfiddle.net/mcfly303/XXXYn/1/
As you can see, the button will toggle items open or closed opposite of their current state. Is there a way to do a "universal" expand/collapse, regardless if the nested items are expanded or collapsed?
Basically I'd like the "toggle all" button to result only in a) the title or b) the title and the image.
Thanks in advance for any help!!!!
my html:
<div class="well sidebar-nav" id="sidebar">
<ul class="nav nav-list">
<li>Toggle All
</li>
</ul>
</div>
<div class="accordion" id="accordion1">
<div class="accordion-group">
<div class="row-fluid">
<div class="span9">
<div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapseOne">
<h2>COOL HAND LUKE</h2>
</a>
</div>
</div>
</div>
<div id="collapseOne" class="accordion-body collapse">
<div class="accordion-inner">
<div class="mainList"> Paul Newman Movies <i class="icon-white icon-th-list"></i>
</div>
</div>
</div>
</div>
</div>
<div id="collapseMain" class="accordion-body collapse in">
<div class="accordion-inner">
<div class="row-fluid">
<div class="span12">
<img src="http://www.samefacts.com/wp-content/uploads/2012/12/CoolHandLuke_135Pyxurz.jpg" alt="">
</div>
</div>
</div>
</div>
my javascript:
$('.expandcollapse').click(function () {
$('.collapse').each(function (index) {
$(this).collapse("toggle");
});
});
EDIT: So I partially figured it out. jsfiddle: http://jsfiddle.net/mcfly303/XXXYn/4/
I split to button into two separate buttons to clearly label each function I want to achieve.However, there is still a kink. Namely on loading, the FIRST CLICK on the Title View button will toggle the text open and the picture closed. And also on load, the first click on the Title and Image button will toggle the text open and keep the image open.
After the first click, everything works fine, which to clarify (and edit my misstatement above) is:
Click on TITLE VIEW - collapses all except the Title. Click on the Title will expand/collapse the text piece
Click on TITLE AND IMAGE VIEW - expands to Title and Image. Click on the Title will expand/collapse the text piece
If anyone can please help with this last kink of the "first click problem" I would really appreciate it!
Thanks.
Updated JS:
var isCollapsed = false;
$('.expandcollapse').click(function () {
var collapseCommand = isCollapsed ? "show" : "hide";
$('.collapse').each(function () {
$(this).collapse(collapseCommand);
});
isCollapsed = !isCollapsed;
});
I also added the in class to #collapseOne so the page displays correctly initially.
Edit:
New code based on your edit:
$('.titleView').click(function () {
$('#collapseOne, #collapseMain').collapse('hide');
});
$('.fullStubView').click(function () {
$('#collapseOne, #collapseMain').collapse('show');
});
Unless I'm missing something, seems like this solves the problem. jsFiddle

Categories