There is an accordion on the left container of my webpage which is left aligned by default. I am using CSS to align it center. I have tried using position: center, align: left and margin-left: 5px in the CSS code but those are not working. Can anyone help me out. Thanks in advance.
Here is my code for CSS:
var acc_leftpanel = document.getElementsByClassName("accordion_leftpanel");
var i;
for (i = 0; i < acc_leftpanel.length; i++) {
acc_leftpanel[i].onclick = function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + 'px';
}
}
}
button.accordion_leftpanel {
background-color: #2da0d9;
color: #444;
cursor: pointer;
padding: 5px;
width: 60%;
border: none;
align: center;
text-align: center;
outline: none;
font-size: 12px;
transition: 0.4s;
border-radius: 25px;
}
button.accordion_leftpanel.active,
button.accordion_leftpanel:hover {
background-color: #5ebb61;
}
button.accordion_leftpanel:after {
color: #ffffff;
font-weight: bold;
float: center;
margin-left: 8px;
}
<div class="leftcontentborder">
<p align="center">LIST OF SOLVED PAPERS</p>
<button class="accordion_leftpanel" align="center">June 2014</button>
<div class="panel">
<p>Paper 2</p>
<p>Paper 3</p>
</div>
</div>
Center using using margin, margin: 0 auto;
Also, check out https://developer.mozilla.org/en-US/docs/Web/CSS
You can add a class to your CSS if you want to center the all inside leftcontentborder.
.leftcontentborder {
text-align: center;
}
Related
so I have set up my div to expand on href click. Href is before div which is executing my javascript width of div from 48px to 240px. So all is working properly but when the width is expanded and I click on area where div has been expanded it doesn't collapses. Can't figure out how to fix it. On Code Snippet seems working but on my browser doesn't work (Firefox).
function toggleNavbar() {
var navbar = document.getElementById('navbar');
var displaySetting = navbar.style.width;
var navbarButton = document.getElementById('navbar_button');
if (displaySetting == '240px') {
navbar.style.width = '48px';
document.getElementById('navigation').innerHTML = "<i class='fas fa-bars'></i>";
}
else {
navbar.style.width = '240px';
document.getElementById('navigation').innerHTML = "<i class='fas fa-bars'></i> Navigation";
}
}
#navbar {
position: relative;
width: 48px;
height: 100%;
padding: 20px 0;
overflow: hidden;
}
#navbar a {
text-decoration: none;
display: block;
}
#navbar .navbar_item {
background-color: rgb(165, 23, 69);
border: none;
color: white;
text-decoration: none;
font-size: 16px;
padding: 10px 10px;
}
#navbar .navbar_item i {
width: 30px;
padding: 0 5px;
}
<script src="https://kit.fontawesome.com/7204bf25d6.js"></script>
<div id="navbar">
<a href="#" id="navbar_button" onclick="toggleNavbar()">
<div class="navbar_item" id="navigation">
<i class="fas fa-bars"></i>
</div>
</a>
</div>
Problem fixed.
I haven't added jQuery to my documents. After adding it it has fixed problem.
Thanks to #ikiK for giving some advice on checking code.
Our website uses an accordion with collapsible panels. Inside one of the accordion panels there are a couple of checkboxes that can be checked or unchecked. Checkbox 1 -if checked- shows another set of two checkboxes but the accordion panel does not expand when the hidden checkboxes show.
How do I make the accordion panel also expand when the new checkboxes appear?
The below HTML + CSS + JS is being used.
// Accordion panels
var acc = document.getElementsByClassName("troubleshooter-accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
// Hide checkboxes
function showextra() {
var checkBox = document.getElementById("check1a");
var extra = document.getElementById("checkbox1a-extra");
if (checkBox.checked == true){
extra.style.display = "block";
} else {
extra.style.display = "none";
}
}
.troubleshooter-accordion {
background-color: rgba(0,175,75,1.00);
border: 1px solid rgba(0,175,75,1.00);
color: rgba(255,255,255,1.00);
padding: 16px;
cursor: pointer;
width: 100%;
text-align: center;
outline: none;
font-size: 1.15em;
transition: 0.4s;
margin-top: 2px;
border-radius: 8px;
}
.active, .troubleshooter-accordion:hover {
background-color: rgba(255,255,255,1.00);
border: 1px solid rgba(0,145,255,1.00);
color: rgba(0,145,255,1.00);
}
.troubleshooter-panel {
padding: 0 16px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
border-radius: 8px;
}
.troubleshooter-panel h4 {
margin: 16px 0
}
.infobox {
border: 2px solid rgba(0,175,75,1.00);
border-radius: 8px;
margin-top: 16px;
padding: 24px 16px;
}
.checkbox-extra {
display: none;
margin-left: 24px;
}
<button class="troubleshooter-accordion">Accordion</button>
<div class="troubleshooter-panel">
<h4 align="center">Check the boxes below</h4>
<hr>
<p>
<label><input type="checkbox" id="check1a" name="check1a" value="check1a" class="check1a" onclick="showextra()"> Checkbox 1</label>
<div class="checkbox-extra" id="checkbox1a-extra">
<p>
<label><input type="checkbox" id="check1a1" name="check1a1" value="check1a1" class="check1a1"> Checkbox 1-A</label><br>
<label><input type="checkbox" id="check1a2" name="check1a2" value="check1a2" class="check1a2"> Checkbox 1-B</label>
</p>
</div>
<hr>
</p>
<p>
<label><input type="checkbox" id="check1b" name="check1b" value="check1b" class="check1b"> Checkbox 2</label>
</p>
<hr>
</div>
When you expand the accordion the first time you are setting it's max-height value by:
panel.style.maxHeight = panel.scrollHeight + "px";
When you are expanding the accordion a second time, this should ofcourse happen again or else the max-height stays the same.
To fix this, you can simply look for the parent panel from the checkbox and set the max-height again:
var panel = checkBox.closest('.troubleshooter-panel');
panel.style.maxHeight = panel.scrollHeight + "px";
Full code:
// Accordion panels
var acc = document.getElementsByClassName("troubleshooter-accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
// Hide checkboxes
function showextra() {
var checkBox = document.getElementById("check1a");
var extra = document.getElementById("checkbox1a-extra");
if (checkBox.checked == true){
extra.style.display = "block";
var panel = checkBox.closest('.troubleshooter-panel');
panel.style.maxHeight = panel.scrollHeight + "px";
} else {
extra.style.display = "none";
var panel = checkBox.closest('.troubleshooter-panel');
panel.style.maxHeight = panel.scrollHeight + "px";
}
}
.troubleshooter-accordion {
background-color: rgba(0,175,75,1.00);
border: 1px solid rgba(0,175,75,1.00);
color: rgba(255,255,255,1.00);
padding: 16px;
cursor: pointer;
width: 100%;
text-align: center;
outline: none;
font-size: 1.15em;
transition: 0.4s;
margin-top: 2px;
border-radius: 8px;
}
.active, .troubleshooter-accordion:hover {
background-color: rgba(255,255,255,1.00);
border: 1px solid rgba(0,145,255,1.00);
color: rgba(0,145,255,1.00);
}
.troubleshooter-panel {
padding: 0 16px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
border-radius: 8px;
}
.troubleshooter-panel h4 {
margin: 16px 0
}
.infobox {
border: 2px solid rgba(0,175,75,1.00);
border-radius: 8px;
margin-top: 16px;
padding: 24px 16px;
}
.checkbox-extra {
display: none;
margin-left: 24px;
}
<button class="troubleshooter-accordion">Accordion</button>
<div class="troubleshooter-panel">
<h4 align="center">Check the boxes below</h4>
<hr>
<p>
<label><input type="checkbox" id="check1a" name="check1a" value="check1a" class="check1a" onclick="showextra()"> Checkbox 1</label>
<div class="checkbox-extra" id="checkbox1a-extra">
<p>
<label><input type="checkbox" id="check1a1" name="check1a1" value="check1a1" class="check1a1"> Checkbox 1-A</label><br>
<label><input type="checkbox" id="check1a2" name="check1a2" value="check1a2" class="check1a2"> Checkbox 1-B</label>
</p>
</div>
<hr>
</p>
<p>
<label><input type="checkbox" id="check1b" name="check1b" value="check1b" class="check1b"> Checkbox 2</label>
</p>
<hr>
</div>
I have a button of fixed size and various chunks of text. The length of the texts is different. How can I make the size of the text font change dynamically according to its length in order to fit the button boundaries properly? Thank you.
Well, depends. Is the height fix as well? If both height and width are fixed, you will have to calculate the fontsize via javascript.
In most of the cases two or three if conditions should be absolutely sufficient for the specific usecase.
function font_size_adjust () {
// Grab the string
var string = $('#button_text').text()
// Get the length in characters of the string
var string_size = string.length
// Build variable to change attribute
var font_size = 0
// Define logic for resizing, adapt this to your personal needs
if (string_size < 60) {
fontsize = '2vw';
} else if (string_size > 60) {
fontsize = '4vw';
} else {}
// Change fontsize
$('#button_text').css('font-size', fontsize)
}
// Call the function where- and whenever needed:
font_size_adjust();
// Example stuff
$('#toggle_small').click(function () {
$('#button_text').text('Now I am small again!')
font_size_adjust();
})
$('#toggle_big').click(function () {
$('#button_text').text('Now I am large again! Lets get this rollin! rollin! rollin! rollin!')
font_size_adjust();
})
#ctn {
display: flex;
float: left;
}
#button {
width: 45vw;
background-color: lightblue;
padding: 10px;
border-radius: 25px;
margin-right: 1vw;
font-family: Varela Round;
color: #FFF;
background: linear-gradient(126deg, rgba(143,61,217,1) 12%, rgba(109,35,177,1) 43%, rgba(101,34,162,1) 72%);
}
#ctn_toggle {
display: flex;
float: left;
}
.toggle {
background-color: lightblue;
font-size: 3vw;
padding: 10px;
border-radius: 25px;
width: 11vw;
text-align: center;
margin-right: 2vw;
font-family: Varela Round;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Varela+Round&display=swap" rel="stylesheet">
<html>
<body>
<div id="ctn">
<div id="button">
<p id="button_text">Make me small and big all day long this is so exciting! Let's go broooh!</p>
</div>
</div>
<div id="ctn_toggle">
<div id="toggle_small" class="toggle">
<p id="button_small">Click me to shrink!</p>
</div>
<div id="toggle_big" class="toggle">
<p id="button_big">Click me to expand!</p>
</div>
</div>
</body>
</html>
Otherwise, these are the options... :
#ctn {
display: flex;
float: left;
}
#button {
width: 20vw;
background-color: lightblue;
padding: 10px;
border-radius: 25px;
margin-right: 1vw;
}
#button_text {
font-size: 4vw;
}
#button2 {
width: 20vw;
background-color: lightblue;
padding: 10px;
border-radius: 25px;
margin-right: 1vw;
}
#button_text2 {
}
#button3 {
width: 20vw;
height: 10vh;
background-color: lightblue;
padding: 10px;
border-radius: 25px;
margin-right: 1vw;
}
#button_text3 {
font-size: 4vw;
}
#button4 {
width: 20vw;
height: 10vh;
background-color: lightblue;
padding: 10px;
border-radius: 25px;
}
#button_text4 {
}
<html>
<body>
<div id="ctn">
<div id="button">
<p id="button_text">Fix button width and fix font-size</p>
</div>
<div id="button2">
<p id="button_text2">Fix button width and no specific font-size</p>
</div>
<div id="button3">
<p id="button_text3">Fix button width, fix button height and fix font-size</p>
</div>
<div id="button4">
<p id="button_text4">Fix button width, fix button height and no font-size</p>
</div>
</div>
</body>
</html>
I found some really helpful tutorial to help me use javascript to expand and collapse content, but now I can't figure out how to make it only expand one at a time... So that when one div is expanded, if you click to expand another one, it collapses the first one. Any ideas? Here is the tutorial that i have followed
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight) {
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}
.collapsible {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
.content {
padding: 0 18px;
display: none;
overflow: hidden;
background-color: #f1f1f1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="collapsible"> Expand </button>
<div class="content">
<p>Some content</p>
</div>
You can select all the <div class="content"> and then set each of those to display: none. Snippet below:
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
//add new code here
var contents = document.querySelectorAll('div.content')
contents.forEach((content) => {
content.style.display = "none"
})
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}
.collapsible {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
.content {
padding: 0 18px;
display: none;
overflow: hidden;
background-color: #f1f1f1;
}
<button class="collapsible"> Expand </button>
<div class="content">
<p>Some content</p>
</div>
<button class="collapsible"> Expand </button>
<div class="content">
<p>Some content2</p>
</div>
Hope this helps
I wrote some code with three things in mind:
Highlighting a selection's border using 'on click'.
Selecting one item will remove the highlight from the other item.
The ability to deselect each item on click.
I've managed to get everything working for the most part, but I don't particularly like how complex the code is for the radial dot that appears when one item is selected.
Below is an example of what I'm talking about, particularly I'm looking for ways to refactor the code below into something a little more legible (shorter).
$(this).children('.radial').children().toggleClass('checked').parents('.itembox')
.siblings().children('.radial').children().removeClass('checked');
Here's a working example for more context (line 10):
var raceInternet = false;
var racePhone = false;
var raceTv = false;
$(function() {
var $targetDiv = $('#race-internet > .itembox');
var $radialDot = $('.radial > .center-dot');
$targetDiv.on('click', function() {
$(this).toggleClass('user-selected').siblings().removeClass('user-selected');
//Is it possible to refactor Line 10?
$(this).children('.radial').children().toggleClass('checked').parents('.itembox').siblings().children('.radial').children().removeClass('checked');
if ($targetDiv.is('.user-selected')) {
raceInternet = true;
} else {
raceInternet = false;
}
})
})
.itembox-container {
display: flex;
}
.boxes-2 {
width: calc((100% - 25px)/2);
margin: 10px;
padding: 10px;
}
.itembox {
position: relative;
display: inline-block;
border: 5px solid #e8e8e8;
border-radius: 10px;
cursor: pointer;
}
.user-selected {
border: 5px solid #E16E5B;
}
.itembox h4 {
color: #22ddc0;
font-weight: 700;
}
span.price {
display: inline-block;
font-weight: 400;
float: right;
color: #22ddc0;
}
.itembox > ul {
list-style: none;
}
.itembox > ul > li {
line-height: 3;
}
.radial {
position: absolute;
float: right;
height: 35px;
width: 35px;
padding: 2px;
border: 5px solid #e8e8e8;
border-radius: 50%;
top: 43%;
right: 10px;
}
.center-dot {
display: none;
position: relative;
height: 21px;
width: 21px;
background-color: #E16E5B;
border-radius: 50%;
}
.checked {
display: block;
}
.prime-aux:first-of-type {
top: 150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="container">
<!-- Primary Content Container -->
<div class="prime-aux">
<div id="race-internet" class="itembox-container">
<div class="itembox boxes-2">
<h4>Gigabit Internet <span class="price">$60/mo</span></h4>
<ul>
<li>1,000 Mbps</li>
<li>No data caps</li>
</ul>
<div class="radial">
<div class="center-dot"></div>
</div>
</div>
<div class="itembox boxes-2">
<h4>Basic Internet <span class="price">$25/mo</span></h4>
<ul>
<li>25 Mbps</li>
<li>No data caps</li>
</ul>
<div class="radial">
<div class="center-dot"></div>
</div>
</div>
</div>
</div>
</section>
<!-- Primary Content Container End -->
View on JS Fiddle
You can eliminate a lot of your jQuery by just leveraging CSS. Typically, if I want to toggle a feature, I have it either display: block; or display: none; based upon a CSS selector. Then, I just use jQuery to toggle the parent element's class name. So for example:
.item.selected .checkmark {
display: block;
}
.item .checkmark {
display: none;
}
$('.item').click(function(){ $(this).toggleClass('selected') });
JSFiddle