I am attempting to implement some bootstrap features into an existing themed Jekyll site. I want to add some of these features in markdown so others can more easily use them.
Below is an example of how I want to add a Bootstrap accordion using a collection loop. This code is included in the _include folder:
<!-- Latest compiled and minified CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<div class="accordion accordion-flush" id="accordionFlushExample">
{% for item in site.accordion %}
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingOne">
<button class="accordion-button collapsed accordion{{ forloop.index }}" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
{{ accordion.title }}
</button>
</h2>
<div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
<div class="accordion-body" for="accordion{{ forloop.site }}">{{ accordion.content | markdownify }}</div>
</div>
</div>
{% endfor %}
</div>
Then, on my index page I have added:
{% include accordion.html %}
---
accordion:
- title: this is item 1
content: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- title: this is item 2
content: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
---
However, the website shows this code and unformatted:
I can see Boostrap is already functioning but my custom variable is not. I assume there is some form of syntax error or I am missing code in a particular location (e.g. _config.yml).
How do I get Jekyll to recognize the accordion and format it in Bootstrap?
Use {% for accordion in page.accordion %}. You add the acccordion content in the front matter of the page, see code below.
<div class="accordion accordion-flush" id="accordionFlushExample">
{% for accordion in page.accordion %}
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingOne">
<button class="accordion-button collapsed accordion{{ forloop.index }}" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
{{ accordion.title }}
</button>
</h2>
<div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
<div class="accordion-body" for="accordion{{ forloop.site }}">{{ accordion.content | markdownify }}</div>
</div>
</div>
{% endfor %}
</div>
Within the page, move the {% include accordion.html %} below the front matter.
---
layout: post
title: "Welcome to Jekyll!"
date: 2022-10-20 20:57:14 +0200
accordion:
- title: this is item 1
content: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- title: this is item 2
content: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
---
{% include accordion.html %}
Result:
Related
my accordion items do not expand separately when one is clicked on. They either both show their content or both remain close. I tried interactive IDs but this did not work.
{% for study in studies %}
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="heading{{ study.uid }}">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-
target="#collapse{{ study.uid }}" aria-expanded="true" aria-controls="collapse{{
study.uid }}">
{{ study.uid }}
</button>
</h2>
<div id="collapse{{ study.uid }}" class="accordion-collapse collapse" aria-
labelledby="heading{{ study.uid }}" data-bs-parent="#accordionExample">
<div class="accordion-body">
text
</div>
</div>
</div>
{% endfor %}
is it maybe something to do with jquery and bootstrap not being the same version?
Inspecting the code shows that each accordion item in the loop has a different ID...enter image description here
I am newbie to Django and apologize in advance for such a basic question to most of you, but I looked for similar questions all over and haven't encountered a workable solution.
I am trying to create a Bootstrap Accordion for each item of a Django for-loop.
So a list of items is displayed, and when you click on one item, the description of it will collapse to show.
The segment currently looks like this using this template:
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</head>
<body>
{% for item in items %}
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-parent="#accordion" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
{{ item }}
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
{{ item.description }}
</div>
</div>
</div>
</div>
</body>
Now, this is giving the same value (collapseOne) to data-bs-toggle, aria-controls and id of accordion-collapseclass(collapsing element) for every for-loop item, resulting in all the accordion items collapsing when one of them is clicked though I want only the clicked one to collapse.
So I tried to pass the Django variable as such:
{{ item }} in place of collapseOne
{{ forloop.counter }} in place of collapseOne
The accordion still shows, but it doesn't collapse when clicked.
Is there a way to pass a Django variable to attributes of accordion-item? Or any other work around?
I'd appreciate your advice.
You should be able to use the {{ forloop.counter }} - just make sure to update the value everywhere you need:
{% for item in items %}
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="heading-{{ forloop.counter }}">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-parent="#accordion" data-bs-target="#collapse-{{ forloop.counter }}" aria-expanded="false" aria-controls="collapse-{{ forloop.counter }}">
{{ item }}
</button>
</h2>
<div id="collapse-{{ forloop.counter }}" class="accordion-collapse collapse" aria-labelledby="heading-{{ forloop.counter }}" data-bs-parent="#accordionExample">
<div class="accordion-body">
{{ item.description }}
</div>
</div>
</div>
</div>
{% endfor %}
I'm struggling with a task in Django.
I have my database up and running with information on resellers. (name, address, region etc...)
and I want to implement Bootstrap collapse functionality where each card is a region. I was able to do that hardcoding the handling of the region. So in my base.html file I have:
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Region1
</button>
</h2>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
{% block content_Region1 %}
{% endblock %}
</div>
</div>
</div>
and in the block content of Region1 I use the home.html template as follow:
{% extends "base.html" %}
{% load static %}
{% block content_Veneto %}
<div class = "container">
{% for reseller in resellers %}
{% if reseller.region == "Veneto" %}
<div class="reseller_name">
<a href="{% url 'reseller_detail' reseller.id %}">
<p>{{reseller.name}} - {{reseller.cityname}}</p>
</a>
</div>
{% endif %}
{% endfor %}
</div>
What I would like to have is a list containing all the regions that are present in by database and then, in the base.html file I would like to do something like:
{% for region in list_regions %}
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
region
</button>
</h2>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
{% block content_region %}
{% endblock %}
</div>
</div>
</div>
{% endfor %}
so that I do not have to write the same code multiple times. Any idea?
The issue is that I'm not sure how to get the region_list out of the database.
Thanks and sorry for the long post!
Instead of blocks use the include template tag:
{% for region in list_regions %}
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
region
</button>
</h2>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
{% include "template_name.html" %}
</div>
</div>
</div>
{% endfor %}
Change template_name.html with your template which you want to include.
I am using Jekyll together with bootstrap-4 and try to have code rendered within a accordion view but i can't get jekyll to render the markdown within the divs.
I tried to add the markdown="1" flag to all "upper" divs but it's not parsing it.
Simple Example whish i would love to see working:
<div id="accordion">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</button>
</h5>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
## first card with markdown ```swift let code: bool = true ```
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
</button>
</h5>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
<div class="card-body">
Some content within the second card
</div>
</div>
</div>
</div>
Question: How to I dell jekyll to render something within multiple divs?
Use markdownify to convert a Markdown-formatted string into HTML.
{{ page.excerpt | markdownify }}
or simply pass the output to the markdownify
{{ "# foo bar" | markdownify }}
Or load your markdown file in your HTML page:
Create a markdown formatted file (e.g. foo.md)
Put your markdown's formatted text on it
load foo.md file in you page:
<div class="card-body">
{% capture foo_bar %}{% include foo.md %}{% endcapture %}
{{ foo_bar | markdownify }}
</div>
In _config.yml :
kramdown:
# instruct kramdown to parse inside html block elements
# like p, header, lists, ...
parse_block_html: true
I am using an accordian, with the default as collapsed. When I run my program everything is collapsed, so ok on that part. However, when I try to click one one and show its contents it only un-collapses the first accordian item.
Here is my code:
{% block content %}
{% for dict_item in intel %}
<div id="accordion" role="tablist">
<div class="card">
<div class="card-header" role="tab" id="headingOne">
<h5 class="mb-0">
<a data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
{{ dict_item['name']}} -- {{ dict_item['date'] }}
</a>
</h5>
</div>
<div id="collapseOne" class="collapse" role="tabpanel" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
My Stuff in here
</div>
</div>
</div>
</div>
{% endfor %}
I image it has to do with the id/classes in the html but I am more of a backend guy so I am not an html wizard.
Also, I am using v4 of bootstrap.