I'm creating a website for a music festival (a small one). Like you can see in this example : http://bioa7.belleileonair.org/ (This is only a test website).
I would like to have collapse div when I click on image, witch show the information about the artist. when I click on an other image, I would like to hide the active div then show the other corresponding to the image click.
Before asking on stackoverflow, I'd already tried some code related to bootstrap collapse. Like you can see in "Samedi soir" section when I click on the image, it work but if I click on the second one, the div related to the first image doesn't close. I think Javascript is needed but I do not understand anything about it.
I'd like some advise about what I want to do. Is the collapse function the best solution in this case, or maybe another solution is better?
My code :
<section id="saturday-night">
<div class="full-container">
<div class="row">
<h2>Samedi Soir</h2>
<div class="panel-group" id="accordion">
<div class="grid">
<div class="panel panel-default">
<figure class="effect-lily">
<img src="images/artistes/12.jpg" alt="img12"/>
<figcaption>
<div>
<h2>First <span>Image</span></h2>
<p>Lily likes to play with crayons and pencils</p>
</div>
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel1">Panel 1</a>
</figcaption>
</figure>
</div>
<div class="panel panel-default">
<figure class="effect-lily">
<img src="images/artistes/12.jpg" alt="img12"/>
<figcaption>
<div>
<h2>Second <span>image</span></h2>
<p>Lily likes to play with crayons and pencils</p>
</div>
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel2">Panel 1</a>
</figcaption>
</figure>
</div>
<div id="panel1" class="panel-collapse collapse">
<div class="panel-body">
<p>Contents panel 1</p>
</div>
</div>
<div id="panel2" class="panel-collapse collapse">
<div class="panel-body">
Contents panel 2
</div>
</div>
</div>
</div>
...
It's soooo simple. Just make your Collapse tab on bootstrap properly. Simply replace the text of that tab with image src. Leave everything as it is. That's it.
I have the following code,
<div class="panel panel-default">
<a class="panel-heading visible-xs-block visible-sm-block visible-md-block visible-lg-block" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
<h4 class="text-danger">
Urgent
</h4>
</a>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
some text here
</div>
</div>
</div>
The problem is that when I run the above code the accordion title (a element) does not render correctly.
Notice that the <a> does not contain any text and instead of placing my <h4> inside of the <a> it places it outside and creates an entire new element.
I will note that the page the accordion is on is being rerendered, Salesforce reRender. The page renders correctly and this is the only issue that I am having.
Can anyone tell what I am doing wrong or how to fix this? It can be a hacky fix as long as it does fix the markup.
I have a single accordion item that I am using for a read more / less link on a page.
The purpose of this is to click it to read more, and a few paragraphs will follow.
I have this working, but I need it to stay closed when the page loads, at the moment the page loads with the item open.
What can I add to fix this?
<div class="accordionMod panel-group">
<div class="accordion-item">
<h4 class="accordion-toggle">Read More / Less</h4>
<section class="accordion-inner panel-body">
<p>more info.</p>
<h4 class="title">More titles</h4>
<p>more content</p>
</section>
</div>
</div>
I think this will work
<div class="accordion" id="myAccordion">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#myAccordion" href="#collapseOne">
Title
</a>
</div>
<div id="collapseOne" class="accordion-body collapse">
<div class="accordion-inner">
Content
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#myAccordion" href="#collapseTwo">
Title
</a>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
Content
</div>
</div>
</div>
</div>
if you add the class in to accordion-body collapse it will be open by default.
Sounds like you don't need an accordion, which has multiple panels, only one of which can open at a time. Instead, just use collapse which allows you to toggle the visibility of a section of the page.
Panel Visibility
From the collapse docs:
The collapse plugin utilizes a few classes to handle the heavy lifting:
.collapse hides the content
.collapse.in shows the content
.collapsing is added when the transition starts, and removed when it finishes
Thus, to start off collapsed, just make sure your extra content has the class collapse and not in
Simple HTML
To use collapse, you really just need to specify a data-toggle="collapse" and then point the collapse to the css selector of the section you would like to toggle using data-target.
Here's a bare bones example that just exposes the collapsing functionality:
<a data-toggle="collapse" data-target="#ReadMoreInfo" href="#">
Read More / Less
</a>
<div id="ReadMoreInfo" class="collapse">
<p> More Info Here </p>
</div>
HTML with Bootstrap classes
All the other bootstrap classes are just to help make the collapsible panel look like a collapsible panel. I would recommend formatting them like this or doing a lot of custom CSS work. Even if you wanted to do the CSS yourself, starting off with this template and then overriding the styles would be best.
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse"
data-target="#ReadMoreInfo"
href="#ReadMoreInfo">
Read More / Less
</a>
</h4>
</div>
<div id="ReadMoreInfo" class="panel-collapse collapse">
<div class="panel-body">
<p>more info.</p>
<h4 class="title">More titles</h4>
<p>more content</p>
</div>
</div>
</div>
Working Demo in jsFiddle
Screenshot:
Removing the in class did not work for me in my case(though normally it should). I was just looking for the answer to this question yesterday. I used this to make the accordion default to close:
$( document ).ready(function() {
$('.collapse').collapse({
toggle: false
});
});
See also this question on:
Jquery accordion not collapse by default
if accordion is with icon, add collapsed class name to :
<a class="accordion-toggle accordion-toggle-styled collapsed" >
and add collapse class name to:
<div id="collapse0" class="panel-collaps collapse">
complete code is:
<div class="panel-group accordion" id="accordion0">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle accordion-toggle-styled collapsed" data-toggle="collapse" data-parent="#accordion0" href="#collapse0">
Collapsible Header Text
</a>
</h4>
</div>
<div id="collapse_3_1" class="panel-collaps collapse">
<div class="panel-body">
<p> body text
</p>
</div>
</div>
</div>
</div>
It's easy. In Bootstrap 5, edit your HTML to remove the "show" class from your first accordion item. See Make accordion closed by default in Bootstrap, the answer that starts "Was recently working with Bootstrap".
I am building a website using the bootstrap framework and having some problems with the collapse component. I just switched over to Bootstrap version 3 from an older version. In the older version the collapse worked fine in all browsers. However, now after linking to the new version of bootstrap css and javascript and updating the html tags, it is not working entirely correct. In chrome, all of the collapsed blocks work except for three of them. When I click on them nothing happens. If I force these to open when the page opens (by adding the collapse.in) then they do but when i close them and then try to open them again they will not. I have 5 separate sets of accordions and in each of the three cases where they do not work it is the last one in the set. I have compared the code of these to the rest of my code as well as to the code on the bootstrap examples and I can't seem to find any syntax errors on my part. Here is some of the code:
<div class="panel-group" id="accordion1">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion1" href="#collapseOne">
Mid Shore Business and Technology Park
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
Content
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion1" href="#collapsetwo">
Dorchester Technology Park
</a>
</h4>
</div>
<div id="collapsetwo" class="panel-collapse collapse">
<div class="panel-body">
Content
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion1" href="#collapsesix">
Mistletoe Farm Project
</a>
</h4>
</div>
<div id="collapsesix" class="panel-collapse collapse">
<div class="panel-body">
Content
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion1" href="#collapsenine">
Cambridge Waterfront: SAILWINDS PARK
</a>
</h4>
</div>
<div id="collapsenine" class="panel-collapse collapse">
<div class="panel-body">
</div>
</div>
</div>
</div>
On a slightly unrelated note, none of them work in IE. Thanks in advance!
I'm currently developing jquery custom mobile template. I need to know can we use data-role="header" tag more than once in a page ? Because in my page as per the header and footer I've couple of in the middle also. For example headings should be wrapped with background color and even though I used will it be validate http://validator.w3.org/mobile/. Also I tried applying following jquerymobile class to a div class="ui-bar" but it's not working as I expected eg :(not reading the background color).
Alternatively I can define a custom class but I need to know have jquery already defined a class something similar to my requirement.
FYI: here is my HTML example
<div data-role="page" data-theme="a">
<header data-role="header">
<div>Main Heading</div>
</header>
<!-- logo -->
<hr/>
<div class="ui-grid-b">
<div class="ui-block-a">
<a href="#">
<div class="h_bag"></div>
BAG (0)
</a>
</div>
<div class="ui-block-b">
<a href="#">
<div class="lust_list"></div>
LUST LIST
</a>
</div>
<div class="ui-block-c">
<a href="#">
<div class="search_size"></div>
SEARCH SIZE
</a>
</div>
</div>
<!-- header options -->
<div class="ui-bar">
<h1>This Sub heading should to wrapped with background colour</h1>
</div>
</div>
You can easily use more the one header in jQuery Mobile, and here's an example:
http://jsfiddle.net/Gajotres/UGVwW/
Background color of every element can also be easily achieved but you will need to fore it with !important:
#second-header {
background: red !important;
}
Here's an HTML example:
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page" id="index">
<div data-theme="a" data-role="header">
<h3>
First Page
</h3>
Next
</div>
<div data-theme="a" data-role="header" id="second-header">
<h3>
First Page
</h3>
Next
</div>
<div data-role="content">
Test button
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>