my initial problem was that my accordions all opened at the same time but I understood that it was coming from the Id which was the same all the time.
So I tried to make my ID dynamic but that didn't solve my problem.
would you have a solution please? thank you
here is my code:
<div class="accordion mb-5" id="accordion-infos">
<f:for each="{field.container}" as="container">
<!-- foreach bouton contenu -->
<div class="card">
<div class="card-header" id="heading1-{container.buttoncontent}">
<h2>
<button class="accordion-button btn btn-link btn-block text-left"
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapseOne-{container.buttoncontent}"
aria-expanded="true"
aria-controls="collapseOne-{container.buttoncontent}">
{container.buttoncontent}
</button>
</h2>
</div>
<div id="collapseOne-{container.buttoncontent}"
class="accordion-collapse collapse"
aria-labelledby="heading1-{container.buttoncontent}"
data-bs-parent="#accordion-infos">
<div class="card-body">
<div class="section-card">
<div class="row">
<div class="col-lg-6 col-md-6">
<f:format.raw>{container.content}</f:format.raw>
</div><!-- col-lg-6 col-md-6-->
</div><!-- row-->
</div><!-- section card -->
</div> <!-- card body -->
</div> <!-- collapsOne -->
</div> <!-- card -->
</f:for><!-- endfor bouton contenu-->
</div><!-- accordion mb-5 -->
using any editable text as an ID with restrictions is a bad idea in general.
for accordions or similar construction you always should use the uid from TYPO3. Or at least the iterator.index of a loop.
As you could have multiple accordions in one page you should combine it.
so your ID should consist of the uid of the container and the uids of the contained elements.
Something like: id="container-{data.uid}-{element.uid}"
or
<f:for each="{field.container}" as="container" iteration="iterator">
:
<div class="card-header" id="container-{data.uid}-{iterator.index}"`>
:
<div id="collapseOne-{data.uid}-{iterator.index}" ...
:
Related
I am using the following code to achieve a three-column design with a read more button. I changed the columns to display:flex to make them the same height. It looks fine when in default state. When you open a read-more option though, the other buttons shift too. Is there a possibility to prevent the buttons from shifting?
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- make cards same height -->
<section id="cards" class="py-5 bg-white">
<div class="container">
<div class="row">
<!-- diplay cards as flexbox, direction column and space between -->
<div class="col-12 col-sm-4 d-flex flex-column justify-content-between">
<!-- wrap text in a div -->
<div>
<h1>Shootings</h1>
<p>Willkommen bei den ganzen tollen Elementen</p>
<div class="collapse mb-3" id="collapseWidthExample1">
This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
</div>
</div>
<!-- wrap button in a div -->
<div>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample1" aria-expanded="false" aria-controls="collapseWidthExample">Read more</button>
</div>
</div>
<div class="col-12 col-sm-4 d-flex flex-column justify-content-between">
<div>
<h1>Shootings</h1>
<p>Willkommen bei den ganzen tollen Elementen. Willkommen bei den ganzen tollen Elementen.</p>
<div class="collapse mb-3" id="collapseWidthExample2">
This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
</div>
</div>
<div>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample2" aria-expanded="false" aria-controls="collapseWidthExample">Read more</button>
</div>
</div>
<div class="col-12 col-sm-4 d-flex flex-column justify-content-between">
<div>
<h1>Shootings</h1>
<p>Willkommen bei den ganzen tollen Elementen
<div class="collapse mb-3" id="collapseWidthExample3">
This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
</div>
</p>
</div>
<div>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample3" aria-expanded="false" aria-controls="collapseWidthExample">Read more</button>
</div>
</div>
</div>
</div>
</section>
Remove justify-content-between It might work
You can add the align-items-start class to your row div.
<div class="row align-items-start">
But that way you the cards will not have equal heights anymore.
I want to show texts in web-page using loop with html Modal Box.texts saved in database.I am using laravel framework.only show modal box for first item, maybe it can be JavaScript not loading problem.
I used https://www.w3schools.com/howto/howto_css_modals.asp Modal box tutorials.used that css and javascript code.
just used w3schools code.
<div class="row">
#foreach($dw as $ad)
<!-- single product -->
<div class="col-lg-4 col-md-6">
<div class="single-product">
<!--{{$ad->image}}-->
<div>
<img class="img-fluid" src="{{ asset('img/' . $ad->image) }}" alt="">
</div>
<div class="product-details">
<h3 col-xl-5>{{$ad->jobtype}}</h3>
<div class="price col-xl-11">
<h6 col-xl-12>{{$ad->jobC}}</h6>
<div>
<button id="myBtn">Details</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>{{$ad->details}}</p>
</div>
</div>
</div>
</div>
<div class="prd-bottom">Send Your CV</div>
</div>
</div>
</div>
#endforeach
no errors showing but not working modal box for all sets, only showing first item in loop
Set Id for each modal and open them using the button on click
<div class="row">
#foreach($dw as $ad)
<!-- single product -->
<div class="col-lg-4 col-md-6" {{ $makeId = 1 }}>
<div class="single-product">
<!--{{$ad->image}}-->
<div>
<img class="img-fluid" src="{{ asset('img/' . $ad->image) }}" alt="">
</div>
<div class="product-details">
<h3 col-xl-5>{{$ad->jobtype}}</h3>
<div class="price col-xl-11">
<h6 col-xl-12>{{$ad->jobC}}</h6>
<div>
<button class="myBtn" modal-id="modal-{{ $ad->id }}">Details</button>
<!-- The Modal -->
<div class="modal" id="modal-{{ $ad->id }}">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>{{$ad->details}}</p>
</div>
</div>
</div>
</div>
<div class="prd-bottom">Send Your CV</div>
</div>
</div>
</div>#endforeach
<script>
$('.myBtn').click(function(){
var GetModalId = $(this).attr('modal-id');
$("#"+GetModalId).css('display', 'block');
});
$('.close').click(function(){
$('.modal').css('display', 'none');
});
</script>
Remember you need to attach jquery to your page to this codes work
you can use this code to attach jquery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
I'm sorry this is quite a silly question, but maybe it's because of being working for a few hours, but I can't wrap my head around this. I mean, I think I can solve this by manipulating the whole div structure with javascript, but I can't help to feel there has to be a way simpler solution that I'm not thinking of.
Here's a fiddle of what I got right now:
https://jsfiddle.net/aq9Laaew/42687/
<main class="col-sm-9 ml-sm-auto col-md-10 pt-3" role="main">
<div class="container-fluid colindex">
<div class="row">
<div class="col-md-9 stackem">
<div class="card">
<ol class="breadcrumb">
<li class="breadcrumb-item">Index</li>
<li class="breadcrumb-item active"></li>
</ol>
<h4 class="card-header">Test
<button class="btn btn-primary add" type="button" data-toggle="tooltip" data-placement="bottom" data-trigger="hover" title="test"><i class="material-icons" id="sidebaricons">bookmark</i></button>
</h4>
<div class="card-body">
<div class="container index">
<div class="row py-3 px-4">
<div class="col-md-6">
<p></p>
</div>
<div class="col-md-6">
<p></p>
</div>
</div>
<div class="row py-3 px-4">
<div class="col-md-6">
<p>test</p>
</div>
<div class="col-md-6">
<p>test</p>
</div>
</div>
<div class="row py-3 px-4">
<div class="col-md-6">
<p>test</p>
</div>
<div class="col-md-6">
<p>test</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<p>testlist</p>
</div>
</div>
</div>
</main>
So the div which says "testlist" on the right, I got an include there with a list with links for fast access.
Question: What I'm trying to achieve is adding a button on this list which will toggle it. The thing is, when it's hidden, I want the other divs on the left side to expand and takes up the space on the list. When the list would be toggled again it would become like it is at the moment again.
Again, sorry for the (I'm sure) silly question, and thanks a ton in advance.
Have you tried using <div class="col-md stackem">
instead of <div class="col-md-9 stackem">
to let bootstrap auto-adjust the width?
Here's the first page that the a href='' code is working .
moneypro.online/website-design
<div class="row animate-box fadeInUp animated-fast">
<!-- Tabs -->
<div class="gtco-tab-content tab-content animated-fast active fadeIn" data-tab-content="1">
<div class="col-md-6">
<div class="gtco-video gtco-bg gtco-image img-responsive" style="background-image: url(/WebsiteDesign.png); background-size: contain; ">
</div>
</div>
<div class="col-md-6">
<h2>Website Design</h2>
<p>As a business start with an idea, an online identity starts with a design concept. Here at Euro ITS we listen to client business goals and incorporate it within our design. Together with our knowledge of digital marketing, our website designs are: </p>
<div class="row">
<div class="col-md-12">
<h4>✔ Responsive</h4>
</div>
<div class="col-md-12">
<h4>✔ User oriented</h4>
</div>
<div class="col-md-12">
<h4>✔ Search engine ready</h4>
</div>
</div>
<div class="row">
<div class="col-md-4">
<button type="button" class="btn btn-success btn-block">Appointment</button>
</div>
<div class="col-md-4">
<button type="button" class="btn btn-info btn-block">Inquiry</button>
</div>
<div class="col-md-4">
<button type="button" class="btn btn-warning btn-block">Pricing</button>
</div>
</div>
</div>
</div>
</div>
and here is the other page that the a href='' code does not work.
moneypro.online/services
<div class="gtco-tab-content-wrap" style="height: 643px;" data-section="services">
<div class="gtco-tab-content tab-content animated-fast active fadeIn" data-tab-content="1">
<div class="col-md-6 col-sm-12 col-xs-12">
<div class="gtco-video gtco-bg img-responsive" style="background-image: url(assets/public/images/icons/WebsiteDesign.png); background-size: contain; ">
</div>
</div>
<div class="col-md-6 col-sm-12 col-xs-12">
<div class="row">
<div class="col-md-12">
<div class="panel">
<div class="panel panel-heading panel-cust-bg">
<h2 class="cust-txt"><strong>Website Design</strong></h2>
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-12">
<p>As a business start with an idea, an online identity starts with a design concept. Here at Euro ITS we listen to client business goals and incorporate it within our design. Together with our knowledge of digital marketing, our website designs are: </p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h4>✔ Responsive</h4>
</div>
<div class="col-md-12">
<h4>✔ User oriented</h4>
</div>
<div class="col-md-12">
<h4>✔ Search engine ready</h4>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<a href="/contact" class="btn btn-success btn-block" role="button" >Appointment</a>
</div>
<div class="col-md-4">
Inquiry
</div>
<div class="col-md-4">
Pricing
</div>
</div>
</div>
</div>
they're are exactly the same and i don't know why the other page is working . here's the live website of it
live example
Can someone please explain it to me.
Ok, here is the difference between the two:
Working:
<a href="/contact">
<button type="button" class="btn btn-success btn-block">
Appointment
</button>
</a>
Not Working:
<a href="/contact" class="btn btn-success btn-block" role="button">
Appointment
</a>
You are adding class btn to "a" tag, and it thinks the tag is a button so it ignores href attribute.
Every href element needs a corresponding anchor which should be a name or id attribute and it must match/exist in the page.
This example by w3schools show a good practice of href.
I have two collections, one is a Posts collection which has posts, with an id.
And the other is a Sets collection which has an array called ArticleId that can be updated by the user by inserting a post id from the Posts collection into it via a click function with the button toggle-addToSet.
The user Creates the Array called ArticleId, gives it a name and saves articles in it periodically. Think Pinterest Boards or G+ collections.
I have a button on the post item that when a user clicks the icon, all the Sets he has created come up in a dialogue and the user chooses which Set he want to save the post id into.
<template name="summeryArticle">
<li>
<div class="row col s12 m7">
<div class="card" id="cardId">
<div class="card-image waves-effect waves-block waves-light">
<img src="{{better_featured_image.source_url}}">
</div>
<div class="card-content">
<h5 class=" truncate grey-text text-darken-4">{{title.rendered}}</h5>
MORE <i class="waves-effect waves-teal small material-icons right">playlist_add</i>{{>
likePartial}}{{> reblogPartial}}
<!-- The modal below is what brings up all the sets the user has created so that the user can pick with set they wat to save the article in -->
<div id="modal2" class="modal bottom-sheet">
<div class="modal-content">
<div class="row">
{{#each set}}
<div class="col s6 m6 addSet teal">
<div class="card ">
<div class="card-image">
<span class="card-title cardSet">{{name}}</span>
</div>
<div class="card-footer">
<button type="button" class="btn toggle-addToSet" name="button">add Article Id to this Set!</button>
</div>
</div>
</div>
{{/each}}
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</template>
Graphically it looks like this
And when the user clicks the icon modal-trigger to bring up the Sets he created, it looks like this
As you can see, the user has three Sets, Lifestyle, Love, Business, they can choose to save the posts id into any one of those three.
## GOAL ##
I want to be able to choose a Set, click the add button of my chosen Set, and somehow capture the post Id of the current post in my foreach loop, and insert it into that via the click function, at the moment all I have is this
Template.summeryArticle.events({
'click .toggle-addToSet': function(e, template) {
var ob = this.id
console.log(ob);
}
});
and when I console log that, I just get the Set id instead of the post id.
Question
How can I capture the post id of the current post,
Choose a Set of my liking, then insert the post id into my chosen set?
And if there is a better way to achieve this, please let me know.
EDIT AFTER FEEDBACK
I did the second option like this
<template name="summeryArticle">
{{#let article=this}}
<li>
<div class="row col s12 m7">
<div class="card" id="cardId">
<div class="card-image waves-effect waves-block waves-light">
<img src="{{better_featured_image.source_url}}">
</div>
<div class="card-content">
<h5 class=" truncate grey-text text-darken-4">{{title.rendered}}</h5>
MORE <i class="waves-effect waves-teal small material-icons right">playlist_add</i>{{>
likePartial}}{{> reblogPartial}}
<!-- The modal below is what brings up all the sets the user has created so that the user can pick with set they wat to save the article in -->
<div id="modal2" class="modal bottom-sheet">
<div class="modal-content">
<div class="row">
{{#each set}}
<div class="col s6 m6 addSet teal">
<div class="card ">
<div class="card-image">
<span class="card-title cardSet">{{name}}</span>
</div>
<div class="card-footer">
{{#each s in set}}
<button type="button" class="btn toggle-addToSet" name="button" data-setid="{{s._id}}" articleid="{{article._id}}">add Article Id to this Set!</button> {{/each}}
</div>
</div>
</div>
{{/each}}
</div>
</div>
</div>
</div>
</div>
</div>
</li>
{{/let}}
</template>
my helper is like this
Template.summeryArticle.events({
'click .toggle-addToSet': function(e, template) {
var ob = this
console.log(ob);
var sid = $(e.currentTarget).data('setid');
var aid = $(e.currentTarget).data('articleid');
console.log(sid);
console.log(aid);
}
});
However, this is what I'm getting.
and the log looks like this
where 7MgLCEnTWjXFRhLg6 is the Sets_id depending on which of the three buttons I clicked
SECOND EDIT. CONTEXT
when i do this
<template name="summeryArticle">
{{#let article=_id}}
<li>
<div class="row col s12 m7">
<div class="card" id="cardId">
<div class="card-image waves-effect waves-block waves-light">
<img src="{{better_featured_image.source_url}}">
</div>
<div class="card-content">
<h5 class=" truncate grey-text text-darken-4">{{title.rendered}}</h5>
MORE <i class="waves-effect waves-teal small material-icons right">playlist_add</i>{{> likePartial}}{{> reblogPartial}}
<!-- The modal below is what brings up all the sets the user has created so that the user can pick with set they wat to save the article in -->
<div id="modal2" class="modal bottom-sheet">
<div class="modal-content">
<div class="row">
{{#each s in set}}
<div class="col s6 m6 addSet teal">
<div class="card ">
<div class="card-image">
<span class="card-title cardSet">{{name}}</span>
</div>
<div class="card-footer">
<button type="button" class="btn toggle-addToSet" name="button" data-setid="{{s._id}}" articleid="{{article._id}}">add Article Id to this Set!</button>
</div>
</div>
</div>
{{/each}}
</div>
</div>
</div>
</div>
</div>
</div>
</li>
{{/let}}
</template>
I get this
What's going on here is that I have the articles organised in categories, so what's going on now is that the article=_idbeing captured is the last article in the category, no matter what articles I try to add, it's just one article being caught, and its always the one at the bottom. I have no idea why
There are several ways. One would be something like this:
I would but article id and set id to toggle-addToSet button's data-attributes:
<button type="button" class="btn toggle-addToSet" name="button" data-setid="SETID" data-articleid="ARTID">add Article Id to this Set!</button>
If you call your summeryArticle like this:
{{#each article in articles}}
{{>summeryArticle article=article}}
{{/each}}
(another opotion is use let-helper:
<template name="summeryArticle">
{{#let article=this}}
...
{{/let}}
</template>
Then in your summeryArticle-template you can get article id in sets-loop:
{{#each s in set}}
<button type="button" class="btn toggle-addToSet" name="button" data-setid="{{s._id}}" articleid="{{article._id}}>add Article Id to this Set!</button>
{{/each}}
Then in template events:
Template.summeryArticle.events({
'click .toggle-addToSet': function(e, template) {
var ob = this.id
console.log(ob);
var sid = $(e.currentTarget).data('setid');
var aid = $(e.currentTarget).data('articleid');
Sets.update({_id: sid}, {$addToSet: {ArticlesId: aid}});
}
});
Note!
This assumes you can update your collection directly from client side! Depending on your situation, but usually it is not recommended. Normally you should deny client side updates and use methods for updating collections:
Method.call('mymethd', sid, aid, function(e, r) {
if (!e) {
console.log(r);
} else {
console.error(e);
}
});