I'm new here, new to programming as well so let me apologize in advance because this has probably been covered or may even be common knowledge. I'm in a bit of a timecrunch tho.
I've got a small repair business that I have been planning on running over the road from a website rather than having a traditional brick and mortar shop. Up until a couple weeks ago, I had been messing with an editor on a commerce site intending on working from a simple contact form until i could get a better handle on things, but i soon discovered that the site wouldn't allow me to store the data on the backend like i needed to. Having already at that point taken a few video lessons covering bootstrap (the commerce site used this, and I found that it was easier to manipulate things thru the code rather than the console it provided) I elected to just drop the commerce site and just put up a static page on google cloud to which i can later build on and link a mongodb to using mlab.
that said, I'm not fully committed to that plan, its just that there doesn't seem to be any out of the box editor that would allow me to work with the backend without learning one form of code or other, and after a week or so of research, mongodb and node.js seem to be the most plausible route for me to go given that I'm new and only know a little bit of javascript and html at this point (currently enrolled in an online program to catch up).
So here's where I'm at, I've built a contact form using an accordion menu from bootstrap. I've got my form tag set
<form method="post" action="mailto:example#gmail.com" >
<div id="accordion" role="tablist" aria-multiselectable="true">
<div class="card">
<div class="card-header" role="tab" id="headingOne">
<h5 class="mb-0">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">Collapsible Group Item #1
</a>
</h5>
</div>
<div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne">
<div class="card-block">
<div class = 'container form-group'>
<input type = 'text'>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header" role="tab" id="headingTwo">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">Collapsible Group Item #2
</a>
</h5>
</div>
<div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="card-block">
<div class = 'container form-group'>
<input type = 'text'>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header" role="tab" id="headingThree">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">Collapsible Group Item #3
</a>
</h5>
</div>
<div id="collapseThree" class="collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="card-block">
<div class = 'container form-group'>
<input type = 'text'>
</div>
</div>
</div>
</div>
<div class="card row justify-content-center">
<div class="card-header" role="tab" id="submitForm">
<button type="submit" class="btn btn-primary btn-lg btn-block" >Submit for Quote
</button>
</div>
</div>
</div>
<form>
and at the bottom just before the accordion closing div i put my submit button.
Everything seems to be working properly, except of course the submit button sends a blank email. I've read multiple solutions on here using php, but I'm typically not someone who is good with just cutting and pasting without fully understanding
what I'm doing, so I was wondering might there be another way to attach the filled out form using javascript in some fashion so that I can stick with learning just a couple of languages for now? I've got access to ajax, angular, node, mean and mongo tutorial videos, I just don't know if the specific action that I'm trying to accomplish would fall under any of these.
I've got every intention of sitting through all of those courses and gaining a full understanding of javascript, however, having spent so much time fighting with the commerce site, I'm a bit behind on my launch and could really use this form being operational so that I can get work in to pay the bills while I focus on my studies and learn more code.
Related
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 have a bootstrap accordion in my web app using the code found in the bootstrap documentation:
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">Section 1</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">Section 2</a>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
</div>
</div>
</div>
</div>
In my application.html.erb file I have a line of code set to refresh the page every 30 seconds.
<meta http-equiv="refresh" content="30" >
When the page refreshes it always opens up with the first section open. Is there a way to refactor the code so when the page refreshes it will stay the way the page was before the refresh?
Realized the solution is pretty simple, by changing this line of code:
<div id="collapseTwo" class="accordion-body collapse">
to this:
<div id="collapseTwo" class="accordion-body collapse in">
the section will stay open when the page is refreshed
There is, but it will be complex. The complexity lies in retaining the page state the user has created during their interactions.
Each interaction which changes the state of the GUI is going to need to be tracked so that, after 30 seconds, when the page refreshes it will be clear what the current state is.
In order to maintain the state through the page load you are going to have to use local storage in order to save the data that you collected during the interactions.
Implementing this feature as a whole will not be a trivial undertaking.
The following accordion code is not working properly for me.
<div class="accordion" id="accordion1">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse"
data-parent="#accordion1" href="#note1">
Foo
</a>
</div>
<div class="accordion-body collapse" id="note1">
<div class="accordion-inner">
<pre>Foo body</pre>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse"
data-parent="#accordion1" href="#note2">
Bar
</a>
</div>
<div class="accordion-body collapse" id="note2">
<div class="accordion-inner">
<pre>Bar body</pre>
</div>
</div>
</div>
</div>
It displays and the items expand properly, but the items won't collapse. When I click an open item, it collapses briefly, and then expands again. I've seen this behavior on Bootstrap versions 2.1.0 and 2.1.1. Also, I'm using jQuery 1.7.2 and 1.8.2 and viewing in Chrome 22.
The problem ended up being that I had accidentally included all my javascript script files twice. Removing the duplicate fixed everything. I don't know how common this mistake is, but if someone else has this problem in the future, then it might be helpful to have this answer rather than just deleting the question.
I had the same problem. The problem was that I loaded jQuery after bootstrap.
I had a similar silly problem. I forgot to add the script tags to include Bootstrap JS functionality... Make sure you include the Bootstrap CSS files (link) and the JS files (link). You actually do need both.
I'm trying to use the collapse components of Bootstrap.
It works well but I noticed that sometimes it doesn't close all the other elements; when I click in order from the first to the third and then back to the first again, the third one remains open.
My markup is the same as the example code that Bootstrap provides, because I'm just testing for now.
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
Collapsible Group Item #1
</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">
Part 1
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
Collapsible Group Item #2
</a>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
Part 2
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
Collapsible Group Item #3
</a>
</div>
<div id="collapseThree" class="accordion-body collapse">
<div class="accordion-inner">
Part 3
</div>
</div>
</div>
The JavaScript code is this:
$(".collapse").collapse("#accordion2");
Considering that I'm thinking to use this components in a menu, in order to show a group open according to a PHP variable value do I just have to print the class in to the div collapseOne/collapseTwo and so on?
You do not need the javascript part, in fact - remove it!! It is that code precisely that causes the strange behaviour - accordion2 is initialized twice resulting in a double set of "logic". Your problem is fully reproduceable by using either the javascript or not.
Generally, regarding twitter bootstrap, when you can place all your data and binding-functionality in data attributes, as you have done here, you'll never have to do javascript. TB does the job automatically when the page is loading, by looking for those data attributes.
Consider javascript as a second option, an alternate way, when you cant do what you want by simply adressing the data attributes.
If you made your markup according to bootstrap collapse docs you can achieve this with the following jQuery code:
$(document).on('click', '.accordion-toggle', function(e) {
event.preventDefault();
$('#accordion2').find('.accordion-body').collapse('hide');
$(this).parent().next().collapse('show');
});