I added the following to both the div.panel-heading and h4 element, so that the clickable area is the entire title div:
data-toggle="collapse" data-target='#collapse2'
The data-toggle="collapse" attribute makes your element clickable, by adding it to the div.title element, the entire div becomes clickable. Thus, when users click in between the title text and the border of the div.title element, the accordion will still respond.
The data-target="#collapse2" attribute will add and remove a class named collapsed when clicked. The CSS in the JSFiddle has different styles when collapsed appear and disappear.
I removed the data-parent="#accordion" attribute to allow show all and hide all. If this attribute is added like in the Bootstrap's example, then only one section can be expanded at anytime.
I used Jasny's image upload plugin for Bootstrap to allow users upload images to a server. Later on, I had to populate a page with these uploaded images. Here is how I did it:
<!-- fileinput-exists is used instead of fileinput-new --><divclass="fileinput fileinput-exists"data-provides="fileinput"><divclass="fileinput-preview thumbnail"data-trigger="fileinput"style="width: 200px; height: 150px;"><!-- add the following line --><imgsrc="static/thumb.jpg"></div><div><spanclass="btn btn-default btn-file"><spanclass="fileinput-new">Select image</span><spanclass="fileinput-exists">Change</span><inputtype="file"name="..."></span><ahref="#"class="btn btn-default fileinput-exists"data-dismiss="fileinput">Remove</a></div></div>
Just found a great tool for debugging Django applications, the Django debug toolbar provides a toolbar to your webpage when DEBUG=True. It looks like this:
The toolbar will provides a ton of information, such as:
The number of database queries made while loading the apge
The amount of time it took to load the page (similar to Chrome dev tools' Timeline feature)
The content of your Settings file
Content of the request and response headers
The name and page of each static files loaded along with the current page
Current page's template name and path
If Caching is used, it shows the content of the cached objects and the time it took to load them
Singals
Logging messages
Redirects
To install it:
pip install django-debug-toolbar
Then, in your settings.py:
INSTALLED_APPS = (
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles', # <- automatically added by Django, make sure it is not missing
'debug_toolbar', # <- add this
'myapp', # <- your app
)
# static url has to be defined
STATIC_URL = '/static/'
# pick and choose the panels you want to see
DEBUG_TOOLBAR_PANELS = [
'debug_toolbar.panels.versions.VersionsPanel',
'debug_toolbar.panels.timer.TimerPanel',
'debug_toolbar.panels.settings.SettingsPanel',
'debug_toolbar.panels.headers.HeadersPanel',
'debug_toolbar.panels.request.RequestPanel',
'debug_toolbar.panels.sql.SQLPanel',
'debug_toolbar.panels.staticfiles.StaticFilesPanel',
'debug_toolbar.panels.templates.TemplatesPanel',
'debug_toolbar.panels.cache.CachePanel',
'debug_toolbar.panels.signals.SignalsPanel',
'debug_toolbar.panels.logging.LoggingPanel',
'debug_toolbar.panels.redirects.RedirectsPanel',
]
That's it. Start your server by
python manage.py runser
Load up your page in the web browser, you should see a black vertical toolbar appearing on the right side of your page.
One thing to note, you can edit the content of your DB using this tool. After you make some modifications, make sure click on 'Write Changes' on the top to apply the changes to the DB.
