There are some similar questions however my specific problem is an error in my code. I am able to remove the jumbotron div but there is a portion of it that still shows and I'm unsure why.
Here is the jsfiddle
https://jsfiddle.net/dominiconorton/2bdxvrwq/2/
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Blank</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Blank <span class="sr-only">(current)</span></a>
</li>
</ul>
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Sign out</button>
</div>
</nav>
<!-- Search tutorial -->
<div class="jumbotron" id="searchTutorial">
<div class="container">
<h1 class="display-4">Lorem Ipsum</h1>
<p> Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit
</p>
<div class="removeDiv">
<p>
<a class="btn btn-primary btn-lg " href="#" role="button">Close tutorial</a>
</p>
</div>
</div>
</div>
// close jumbotron //
jQuery(function($) {
$('.removeDiv').on('click', function() {
$(this).parent('div').remove();
});
});
I'm using Bootstrap 4.0 and JQuery 3.3.1
I tried changing the parent of the div so that the #searchTutorial is the parent and this didn't work as expected
I would like to completely remove the jumbotron div onclick of the close tutorial
Your javascript is removing the direct parent of the div being clicked, which is actually div.container. This isn't obvious because the indenting isn't consistent.
I would actually do #mark.hch's idea and use $(this).closest('.jumbotron').remove().
If you can change the structure, you might consider using <section> instead of <div> for the major elements, so that you can use $(this).closest('section').remove();
you have to specify the class
jQuery(function($) {$('.removeDiv a').on('click', function() {$('.jumbotron').remove();});
The parent of removeDiv is the container div and it's working as expected on click on remove div it removes its parent not the whole jumbotron div, that's why there is gray area appears after removing the container div, so in your case you have to directly select jumbotron div or select parent of parent.
Related
Please I am working with bootstrap with react. I am not using react-bootstrap. I am using cdn. After I added the accordion I noticed that the first accordion is expanded always so I tweaked it and removed show from ==>
<div id="collapseOne" class="accordion-collapse collapse show..."
and I set the aria-expanded="false" and added collapsed to the accordion button ==> <button collapsed class="accordion-button py-2" type="button".... That did the collapse of the accordion button but I noticed It tries to expand and gains focus on page load. In the image below
The code below shows the first accordion.
<div className="accordion-item">
<h2 className="accordion-header" id="headingOne">
<button
collapsed
className="accordion-button py-2"
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapseOne"
aria-expanded="false"
aria-controls="collapseOne"
>
<MdOutlineLocalShipping className="fs-5 ma-2" />
Shipping and Returns
</button>
</h2>
<div
id="collapseOne"
className="accordion-collapse collapse"
aria-labelledby="headingOne"
data-bs-parent="#accordionExample"
>
<div className="accordion-body">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum
consectetur maiores vitae dolorum saepe facere unde?
</div>
</div>
</div>;
I have page with tabs. Each tab has their own pagination. But I have problem in putting the pagination at the bottom of the tab. The current pagination that I have right now is sit above. I want to change it and put the pagination at the bottom of the tab page. How do change it in order to achieve the output that I want ?
this is my current pagination
<div class="tab-pane fade show active" id="category_1" role="tabpanel" aria-labelledby="category_1-tab">
<br>
<div>
<nav>
<br>
<ul class="pagination justify-content-center pagination" id="page_1"></ul>
</nav>
</div>
</div>
if(cat === 1 )
{
$("#category_1-tab").append(
`
<div class="accordion-item">
<a onclick="getDetail('${e.id}')" class="accordion-head collapsed" data-toggle="collapse" data-target="#accordion-item-${index}">
<h6 class="title">${e.title}</h6>
<span class="accordion-icon"></span>
</a>
<div class="accordion-body collapse" id="accordion-item-${index}" data-parent="#accordion">
<div class="accordion-inner" id="details_${e.kb_id}">
</div>
</div>
</div>
`
);
}
$("#page_1").html(`${pagination}`);
How do I make the pagination sit at the bottom of the list inside the tab ?
Replace $("#category_1-tab").append( … by $("#category_1-tab").prepend( …
prepend will insert your div.accordion-item before the <br><div> instead of adding at the end.
I have a sidebar menu with many entries and many sublevels, which looks like that :
<div class="container-fluid">
<div class="row">
<div class="col-md-2" id="sidebar" style="margin: 5px 0">
<div class="list-group panel">
Menu
<i class="fa fa-wrench"></i> Menu 1 <i class="fa fa-caret-down"></i>
<div class="collapse" id="tech" data-parent="#sidebar">
Sub 1 <i class="fa fa-caret-down"></i>
<div class="collapse" id="techsub1" data-parent="#techsub1">
<a class="list-group-item" href="techsub1sub1.html">techsub1sub1</a>
<a class="list-group-item" href="techsub1sub2.html">techsub1sub2</a>
</div>
Sub 2 <i class="fa fa-caret-down"></i>
<div class="collapse" id="techsub2" data-parent="#techsub2">
Sub 2 <i class="fa fa-caret-down"></i>
<div class="collapse" id="techsub2sub1" data-parent="#techsub2sub1">
<a class="list-group-item" href="techsub2sub1sub1.html">techsub2sub1sub1</a>
<a class="list-group-item" href="techsub2sub1sub2.html">techsub2sub1sub2</a>
</div>
</div>
</div>
<i class="fa fa-book"></i> Menu 2 <i class="fa fa-caret-down"></i>
<div class="collapse" id="anx" data-parent="#sidebar">
<a class="list-group-item" href="anx1.html">anx1</a>
<a class="list-group-item" href="anx2.html">anx2</a>
</div>
</div>
</div>
<main class="col-md-10" style="background-color: #fff; max-width: 1140px; padding-top: 30px; padding-bottom: 20px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</main>
</div>
</div>
It works well but there are so many entries in the menu that I want to use a pager on each page [Previous - Current - Next]
My concern is that when I click on Previous or Next page, the sidebar is collapsed. Is there a way to expand the according page called, but keeping it collapsed on the home page ?
All you need to do is to add a .show CSS class to the collapsed (having .collapse CSS class) block, which you want to be expanded. See https://getbootstrap.com/docs/4.0/components/collapse/
It can be done in two basic ways - hard-coded for each page or added dynamically/programmatically based on some parameter (probably id of desired expanded collapse)
Passing a parameter from one to other page on redirecting is a separate question, but in case you wonder how to do it - try some URL parameters/hash or cookies/local storage
I'm using Bootstrap to generate tabs. I have a reset button which clears the content from the tab but it doesn't work. Here's my code:
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
<a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
<?php echo "Some text" ?>
<br><br>
<button type="button" class="btn btn-primary" value="Reset" onclick="document.nav-tabContent.nav-home.value=''">Clear</button>
</div>
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
</div>
So my "Clear" button should clear the text, "Some text". How would go about in clearing the text with the button??
tks
maybe you need to add some id or class at your "Some Text" php, like
<span id="abc"><?php echo "Some Text"; ?></span>
So you can access it with jquery or javascript like this onclick button
onclick="somefunction()"
And
somefunction() {
$('#abc').html("");
}
You could try wrap <?php echo 'some text'; ?> in for example a <p> tag and add this code to the onlick event in button tag
<button type="button" class="btn btn-primary" value="Reset" onclick="this.parentNode.querySelector('p').innerHTML = '';">Clear</button>
Try this live example having many tabs
const navItems = document.querySelectorAll('.nav-item')
const tabPanes = document.querySelectorAll('.tab-pane');
navItems.forEach(item => item.addEventListener('click', clear));
function clear(event) {
event.preventDefault();
const element = event.target;
const paneId = element.getAttribute('href').split('#')[1];
const pane = document.querySelector(`#${paneId}`);
clearNavItems();
clearPanes();
element.classList.add('active');
pane.classList.add('show');
pane.classList.add('active');
}
function clearNavItems() {
navItems.forEach(item => item.classList.remove('active'));
}
function clearPanes() {
tabPanes.forEach(pane => {
pane.classList.remove('active');
pane.classList.remove('show');
});
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
<a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
<a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus qui, pariatur ipsum ducimus numquam porro optio adipisci, nemo, cupiditate unde mollitia accusantium, suscipit. Explicabo, officiis corrupti praesentium. Quis, unde, fugit.</p>
<button type="button" class="btn btn-primary" value="Reset" onclick="this.parentNode.querySelector('p').innerHTML = '';">Clear</button>
</div>
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto.</p>
<button type="button" class="btn btn-primary" value="Reset" onclick="this.parentNode.querySelector('p').innerHTML = '';">Clear</button>
</div>
<div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa mollitia unde perspiciatis?</p>
<button type="button" class="btn btn-primary" value="Reset" onclick="this.parentNode.querySelector('p').innerHTML = '';">Clear</button>
</div>
</div>
</div>
Going by what you currently have, I would make the following edit:
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
<p id="nav-home-text"><?php echo "Some text" ?></p>
<br><br>
<button type="button" class="btn btn-primary" value="Reset" onclick="document.getElementById('nav-home-text').innerHTML=''">Clear</button>
</div>
Targeting to clear nav-home will also clear he button as the button is part of nav-home
Wrap the text in a <p> and give it an id so you could target it from the button using document.getElementById()
You should only target .value for elements that have the value attribute e.g <input>.
I think you need to add some jquery to remove the text.
first you need to place the text inside the span with the id content and clear the text inside the content using jquery.
you can use this.
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
<span id="content"><?php echo "Some text" ?></span>
<br><br>
<button class="btn btn-primary" onclick="$('#content').text('');">Clear</button>
</div>
I am trying to create a nested collapse with icon, but when I click on a child inside main collapse, the parent icon is changed. How can I prevent this?
JSFiddle
HTML:
<div class="aside-archives">
<h3>Archive</h3>
<div class="aside-archive">
<div data-toggle="collapse" data-target="#2014">
<i class="fa fa-caret-right"></i>2014
</div>
<div id="2014" class="collapse">
<ul>
<li data-toggle="collapse" data-target="#january-2014"><span class="fa fa-caret-right"></span> January (3)
<div class="collapse-inner" id="january-2014">
Lorem ipsum dolor.
Optio, voluptatem, earum!
Officiis, sint, possimus.
</div>
</li>
<li>February (1)</li>
<li>March</li>
<li>April</li>
<li>May</li>
<li>June</li>
<li>July</li>
<li>August</li>
<li>September</li>
<li>October</li>
<li>November</li>
<li>December</li>
</ul>
</div>
</div>
</div>
JQUERY:
var collapse = $('.collapse');
collapse.on('hide.bs.collapse show.bs.collapse', function (e) {
e.stopPropagation();
var $this = $(this),
parent = $this.parent(),
icon = parent.find('i');
icon.toggleClass('fa-caret-right fa-caret-down');
});