I have implemented a grid system in HTML and bootstrap. These grid contains of panels and they carry various information.I have made these panel movable(drag, drop) using jQuery and some custom java-script and bootstrap.
I need to store the position where each and every item after exiting the session(log out)
Here is my code
<div class="container sortable">
<div class="row"><!-- BEGIN ROW -->
<div class="col-md-4 placeholder-wrapper">
<div class="panel panel-default" id="portlet-linear-color">
<div class="panel-heading">
<div class="panel-title">
Portlet 1
</div>
<div class="panel-controls">
<ul>
<li>
<a class=
"portlet-collapse portlet-icon portlet-icon-collapse"
data-toggle="collapse" href="#" style=
"font-style: italic"></a>
</li>
<li>
<a class=
"portlet-refresh portlet-icon portlet-icon-refresh"
data-toggle="refresh" href="#" style=
"font-style: italic"></a>
</li>
<li>
<a class=
"portlet-close portlet-icon portlet-icon-close"
data-toggle="close" href="#" style=
"font-style: italic"></a>
</li>
</ul>
</div>
</div>
<div class="panel-body">
<h3><span class="semi-bold">Linear</span> Progress</h3>
<p>Click on the refresh icon to simulate an AJAX call and to see an
animated progress bar indicator above the portlet. These progress
bars come in seven different colors that are available in the Pages
contextual color scheme.</p>
</div>
</div>
</div>
<div class="col-md-4 placeholder-wrapper">
<div class="panel panel-default" id="portlet-linear-color">
<div class="panel-heading">
<div class="panel-title">
Portlet 2
</div>
<div class="panel-controls">
<ul>
<li>
<a class=
"portlet-collapse portlet-icon portlet-icon-collapse"
data-toggle="collapse" href="#" style=
"font-style: italic"></a>
</li>
<li>
<a class=
"portlet-refresh portlet-icon portlet-icon-refresh"
data-toggle="refresh" href="#" style=
"font-style: italic"></a>
</li>
<li>
<a class=
"portlet-close portlet-icon portlet-icon-close"
data-toggle="close" href="#" style=
"font-style: italic"></a>
</li>
</ul>
</div>
</div>
<div class="panel-body">
<h3><span class="semi-bold">Linear</span> Progress</h3>
<p>Click on the refresh icon to simulate an AJAX call and to see an
animated progress bar indicator above the portlet. These progress
bars come in seven different colors that are available in the Pages
contextual color scheme.</p>
</div>
</div>
</div>
<div class="col-md-4 placeholder-wrapper">
<div class="panel panel-default" id="portlet-linear-color">
<div class="panel-heading">
<div class="panel-title">
Portlet 3
</div>
<div class="panel-controls">
<ul>
<li>
<a class=
"portlet-collapse portlet-icon portlet-icon-collapse"
data-toggle="collapse" href="#" style=
"font-style: italic"></a>
</li>
<li>
<a class=
"portlet-refresh portlet-icon portlet-icon-refresh"
data-toggle="refresh" href="#" style=
"font-style: italic"></a>
</li>
<li>
<a class=
"portlet-close portlet-icon portlet-icon-close"
data-toggle="close" href="#" style=
"font-style: italic"></a>
</li>
</ul>
</div>
</div>
<div class="panel-body">
<h3><span class="semi-bold">Linear</span> Progress</h3>
<p>Click on the refresh icon to simulate an AJAX call and to see an
animated progress bar indicator above the portlet. These progress
bars come in seven different colors that are available in the Pages
contextual color scheme.</p>
</div>
</div>
</div>
</div><!-- END ROW -->
<div class="row"><!-- BEGIN ROW 1 -->
<div class="col-md-4 placeholder-wrapper"><!-- BEGIN WRAPPER -->
<div class="panel panel-default" id="portlet-linear-color"><!-- BEGIN PANEL -->
<div class="panel-heading"><!-- BEGIN HEADER -->
<div class="panel-title">
Portlet 4
</div>
<div class="panel-controls"><!-- BEGIN ICONS -->
<ul>
<li>
<a class=
"portlet-collapse portlet-icon portlet-icon-collapse"
data-toggle="collapse" href="#" style=
"font-style: italic"></a>
</li>
<li>
<a class=
"portlet-refresh portlet-icon portlet-icon-refresh"
data-toggle="refresh" href="#" style=
"font-style: italic"></a>
</li>
<li>
<a class=
"portlet-close portlet-icon portlet-icon-close"
data-toggle="close" href="#" style=
"font-style: italic"></a>
</li>
</ul>
</div><!-- END ICONS -->
</div><!-- END HEADER -->
<div class="panel-body"><!-- BEGIN PANEL CONTENT -->
<h3><span class="semi-bold">Linear</span> Progress</h3>
<p>Click on the refresh icon to simulate an AJAX call and to see an
animated progress bar indicator above the portlet. These progress
bars come in seven different colors that are available in the Pages
contextual color scheme.</p>
</div><!-- END PANEL CONTENT -->
</div><!-- END PANEL -->
</div><!-- END WRAPPER -->
</div><!-- END ROW 2 -->
</div>
Is there anyway I can save these instances in a database ?
If you want to get the current html of a page use JQuery.
This will work.
<script>
var contentData = $('#divwithhtml').html();
//If you want to post it
$.post( "yoururl.php", { content: "contentData " })
.done(function( data ) {
alert( "Data Loaded: " + data + " posted html succesfull");
});
</script>
I think you can save base layout in database . then each client reposition each site item then you should save position in database by ajax for clientId .
Edited Post:
It's very simple you can echo string code like this :
select `columnName` from `database` where `clientId`=20
when fetch this return query and save to $row you can try this :
echo $row["columnName"];
OR
$ret="<!DOCTYPE html>
<html>
<head>
<title>site name</title>
</head>
<body>
{$row["columnName"]}
</body>
</html>";
echo $ret;
Related
I'm new to coding and hope someone can help be understand where I am going wrong. I am having a problem with getting a modal card popup to trigger from a navbar-item. Everything that I have tried so far triggers the modal at the top menu item. Each of the navbar-items on the drop down will have a link to a modal card.
Thank you in advance for your help!!
const item = document.querySelector(".navbar-item");
const modalBg = document.querySelector('.modal-background');
const modal = document.querySelector('.modal');
item.addEventListener('click', () => {
modal.classList.add('is-active');
});
modalBg.addEventListener('click', () => {
modal.classList.remove('is-active');
});
<section>
<nav class="navbar has-shadow" role="navigation" aria-label="dropdown navigation" id="navbar_link_modal">
<div class="navbar-brand">
<a class="navbar-burger" id="burger">
<span></span>
<span></span>
<span></span>
</a>
</div>
<div class="navbar-menu" id="nav-links">
<div class="navbar-start">
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link" data-target="#modal">Ford</a>
<div class="navbar-dropdown">
<a class="navbar-item">
Explorer
</a>
<a class="navbar-item" href="#framingLumber">
Focus
</a>
<a class="navbar-item">
Flex
</a>
<a class="navbar-item">
F-150
</a>
</a>
</div>
</div>
</div>
</div>
</nav>
</section>
<div class="modal is-active" id="modal">
<div class="modal-background"></div>
<div class="modal-card" id="framingLumber">
<header class="modal-card-head">
<p class="modal-card-title">Modal title</p>
<button class="delete" aria-label="close"></button>
</header>
<section class="modal-card-body">
<!-- Content ... -->
</section>
<footer class="modal-card-foot">
<button class="button is-success">Save changes</button>
<button class="button">Cancel</button>
</footer>
</div>
</div>
You are targeting your modal at your top-level menu as data-target="#modal" which is wrong because there is no element with id 'modal'.
You need to do this at your menu item as data-target="#framingLumber" whereframingLumber is id of your modal and href is not needed.
So your code that would look like this:
<div class="navbar-menu" id="nav-links">
<div class="navbar-start">
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">Ford</a>
<div class="navbar-dropdown">
<a class="navbar-item">Explorer</a>
<a class="navbar-item" data-target="#framingLumber">Focus</a>
<a class="navbar-item">Flex</a>
<a class="navbar-item">F-150</a>
</div>
</a>
</div>
</div>
</div>
Using bootstrap 4 the photos I included so you can see the side nav menu on full screen and then only what shows on the mobile view I highlighted the menus.
https://imgur.com/a/hv7JvZ9
I have a nav bar and then I made a submenu nav on the left side of the website. So the main navbar has login and logout and the side nav menu offers subcategories etc.
Everything looks great on fullscreen.
But on mobile view, the main navbar with login and logout show in the toggle button the sub side nav menu disappears completely. I have tried to add it to the navbar but the issue is its always there, I need it only on mobile view.
I also tried to move it to the top below the navbar on mobile again it's always there. I need to know the way to only make items change positions when on mobile or fullscreen, or if someone knows another workaround.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Fav and touch icons -->
<div class="header">
<nav class="navbar fixed-top navbar-site navbar-light bg-light navbar-expand-md"
role="navigation">
<div class="container">
<div class="navbar-identity">
<a href="<?php echo base_url();?>posts" class="navbar-brand logo logo-title">
<span class="logo-icon"><img class="navbar-brand" src="<?php echo base_url(); ?>" width="100px" height="78px">
</span>Website<span> </span> </a>
<button data-target=".navbar-collapse" data-toggle="collapse" class="navbar-toggler pull-right" type="button">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg>
</button>
</div>
<ul class="navbar-collapse collapse">
<li class = "dropdown-item"><strong>Posts</strong></li>
<?php if(!$this->session->userdata('logged_in')): ?>
<li class="dropdown-item"><strong>Login</strong></li>
<li class="dropdown-item" ><strong></strong></li>
<?php endif; ?>
<?php if($this->session->userdata('logged_in')) :?>
<li class="dropdown-item"><i class=" icon-logout"></i><strong> Log out</strong>
</li>
<?php endif; ?>
</ul>
</li>
<li class="postadd nav-item"><a class="btn btn-block btn-border btn-post btn-danger nav-link" href="<?php echo base_url();?>posts/create">Blogg</a>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</div>
<!-- /.header -->
<div class="search-row-wrapper" style="background-image: url(images/bg.jpg)">
<div class="inner">
<div class="container ">
<form action="#" method="GET">
<div class="row">
<div class="col-md-3">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="main-container">
<div class="container">
<div class="row">
<!-- this (.mobile-filter-sidebar) part will be position fixed in mobile version -->
<div class="col-md-3 page-sidebar mobile-filter-sidebar">
<aside>
<div class="sidebar-modern-inner">
<div class="block-title has-arrow sidebar-header">
<h5><span class="title">Categories</h5>
</div>
<div class="block-content categories-list list-filter ">
<ul class=" list-unstyled">
<li><span class="title">All Categories</span>
</li>
<li><span class="title">Female Escorts </span></li>
<li><span class="title">Massage Parlors and Rub Downs</span></li>
<li><span class="title">Trans and Gay Escorts </span></li>
<li><span class="title">Strip Clubs </span></li>
</li>
</ul>
</div> <!--/.categories-list-->
<div class="block-title has-arrow ">
<h5>Location</h5>
</div>
<div class="block-content locations-list list-filter ">
<ul class="browse-list list-unstyled long-list">
<li> Miami </li>
<li> Broward County </li>
<li> West Palm Beach </li>
<li> Florida Keys </li>
<li>Orlando </li>
<li> Jacksonville</li>
</ul>
</div>
</div>
</aside>
</div>
<!--/.page-side-bar-->
<div class="col-md-9 page-content col-thin-left">
<div class="category-list ">
<div class="tab-box ">
<!-- INSERTING THE CODE HERE TO LOOP-->
<?php
if (empty($posts)) {
echo '<div class="text-center">';
echo "<h3>";
echo "<strong>";
echo "No matching results at this time.";
echo "</strong>";
echo "</h3>";
echo "</div>";
echo '</div>
<!--/.tab-box-->
<div class="pull-right col-xs-6 text-right listing-view-action"><span
class="list-view active"><i class=" icon-th"></i></span> <span
class="compact-view"><i class=" icon-th-list "></i></span> <span
class="grid-view "><i class=" icon-th-large "></i></span></div>
</div>
<!--/.listing-filter-->
<!-- Mobile Filter bar-->
<div class="mobile-filter-bar col-xl-12 ">
<!-- Mobile Filter bar End-->
<div class="tab-content">
<div class="tab-pane active " id="alladslist">
<div class="adds-wrapper row no-margin">
<div class="item-list">
<div class="row">
</div>
</div>
</div>';
} else {
foreach($posts as $post):{ ?>
</div>
<!--/.tab-box-->
<div class="pull-right col-xs-6 text-right listing-view-action"><span
class="list-view active"><i class=" icon-th"></i></span> <span
class="compact-view"><i class=" icon-th-list "></i></span> <span
class="grid-view "><i class=" icon-th-large "></i></span></div>
<div style="clear:both"></div>
</div>
<!--/.listing-filter-->
<!-- Mobile Filter bar-->
<div class="mobile-filter-bar col-xl-12 ">
<ul class="list-unstyled list-inline no-margin no-padding">
<li class="filter-toggle">
<a class="">
<i class=" icon-th-list"></i>
</a>
</li>
<li>
</li>
</ul>
</div>
<div class="menu-overly-mask"></div>
<!-- Mobile Filter bar End-->
<div class="tab-content">
<div class="tab-pane active " id="alladslist">
<div class="adds-wrapper row no-margin">
<div class="item-list">
<div class="row">
<div class="col-md-2 no-padding photobox">
<div class="add-image"><span class="photo-count"><i class="fa fa-camera"></i> </span> <img class="thumbnail no-margin" src="<?php echo site_url();?>assets/images/posts/<?php echo $post['post_image']; ?>" alt="img">
</div>
</div>
<!--/.photobox-->
<div class="col-md-7 add-desc-box">
<div class="ads-details">
<h5 class="add-title"><a href="<?php echo site_url('/posts/'.$post['slug']); ?>">
<?php echo $post['title']." ---". $post['Number'];//TITLE OF THE POST>?></a></h5>
<span class="info-row">
<span
class="date"><i class=" icon-clock"> </i> </span> <small class="category">Location: <?php echo $post['Area']; ?> </small>
</div>
</div>
<!--/.add-desc-box-->
<div class="col-md-3 text-right price-box">
</div>
<!--/.add-desc-box-->
</div>
</div>
<!--/.item-list-->
<?php }endforeach; ?>
<?php } ?>
<!--/.photobox-->
<!--/.add-desc-box-->
<!--/.item-list-->
</div>
</div>
<div class="tab-box"><a href=""> <i class=" icon-star-empty"></i>
</a></div>
</div>
<div class="pagination-bar text-center">
<nav aria-label="Page navigation " class="d-inline-b">
<div class="pagination">
<?php echo $this->pagination->create_links(); ?>
</div>
</nav>
</div>
<!--/.pagination-bar -->
<div class="post-promo text-center">
<h2> Make a free account to post a add </h2>
<h5>Fast and easy</h5>
Post a Free listing now
</div>
<!--/.post-promo-->
</div>
<!--/.page-content-->
</div>
</div>
<!-- /.main-container -->
</div>
Honestly I didn't check in detail, usually html for bootstrap is a headache to read. However, I have something that might be of interest to your situation: css media queries.
https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
The concept being that you can define, according to the client's width and height, different css properties. Beside defining css rules to different screen sizes, you can define different media such as print and so on. In this way, you can make an element to look a certain way when there is a lot of space, and in a different way when there is not so much space. That is what bootstrap is based on. Play around with it.
As a side note, I would recommend you to try isolate exactly the bits of code that are problematic. I usually try to re-write the code in order to have only the problem showing, and none of the unrelated stuff off. In this way you get better and more answers. ;)
There are 2 tabs (data-groups) - Graphics and Logo, with images, each one has 3 images, total 6 images. The filter works well, when you click first tab, it becomes active and shows 3 images filtered and belong to first data-group (Graphics). But when you refresh page, you see first active tab (data-group Graphics) as well, but showing all 6 images, which is wrong. Filter starts working only when you click the tab. It should show only 3 of them matched by data-group. I've tried several scripts and solution from this post. Nothing worked. Any solution?
function portfolio_init() {
var portfolio_grid = $('#portfolio_grid'),
portfolio_filter = $('#portfolio_filters');
if (portfolio_grid) {
portfolio_grid.shuffle({
speed: 450,
itemSelector: 'figure'
});
$('.site-main-menu').on("click", "a", function(e) {
portfolio_grid.shuffle('update');
});
portfolio_filter.on("click", ".filter", function(e) {
portfolio_grid.shuffle('update');
e.preventDefault();
$('#portfolio_filters .filter').parent().removeClass('active');
$(this).parent().addClass('active');
portfolio_grid.shuffle('shuffle', $(this).attr('data-group'));
});
}
}
<!-- Portfolio Subpage -->
<section class="pt-page pt-page-4" data-id="portfolio">
<div class="border-block-top-110"></div>
<div class="section-inner">
<div class="section-title-block">
<div class="section-title-wrapper">
<h2 class="section-title">Portfolio</h2>
<h5 class="section-description">Works</h5>
</div>
</div>
<!-- Portfolio Content -->
<div class="portfolio-content">
<!-- Portfolio filter -->
<ul id="portfolio_filters" class="portfolio-filters">
<li class="active">
<a class="filter btn btn-sm btn-link active" data-group="graphics">Graphics</a>
</li>
<li>
<a class="filter btn btn-sm btn-link" data-group="logo">Logo</a>
</li>
<li>
<a class="filter btn btn-sm btn-link" data-group="print">Print</a>
</li>
<li>
<a class="filter btn btn-sm btn-link" data-group="billboards">Billboards</a>
</li>
<li>
<a class="filter btn btn-sm btn-link" data-group="misc">Misc</a>
</li>
<li>
<a class="filter btn btn-sm btn-link" data-group="photo">Photo</a>
</li>
</ul>
<!-- End of Portfolio filter -->
<!-- Portfolio Grid -->
<div id="portfolio_grid" class="portfolio-grid portfolio-masonry masonry-grid-3">
<!-- Portfolio 1 - Graphics -->
<figure class="item gallery" data-groups='["graphics"]'>
<a href="images/portfolio/full/3.jpg" class="lightbox f-gallery" title="bnr 1">
<img src="images/portfolio/3.jpg" alt="">
<div>
<h5 class="name">bnr 1</h5>
<small>Graphics</small>
<i class="pe-7s-icon pe-7s-photo"></i>
</div>
</a>
</figure>
<figure class="item gallery" data-groups='["graphics"]'>
<a href="images/portfolio/full/3.jpg" class="lightbox f-gallery" title="bnr 2">
<img src="images/portfolio/3.jpg" alt="">
<div>
<h5 class="name">bnr 2</h5>
<small>Graphics</small>
<i class="pe-7s-icon pe-7s-photo"></i>
</div>
</a>
</figure>
<figure class="item gallery" data-groups='["graphics"]'>
<a href="images/portfolio/full/3.jpg" class="lightbox f-gallery" title="bnr 3">
<img src="images/portfolio/3.jpg" alt="">
<div>
<h5 class="name">bnr 3</h5>
<small>Graphics</small>
<i class="pe-7s-icon pe-7s-photo"></i>
</div>
</a>
</figure>
<!-- /Portfolio 1 - Graphics -->
<!-- Portfolio 2 - Logo -->
<figure class="item gallery" data-groups='["logo"]'>
<a href="images/portfolio/full/3.jpg" class="lightbox f-gallery" title="logo 1">
<img src="images/portfolio/3.jpg" alt="">
<div>
<h5 class="name">logo 1</h5>
<small>Logo</small>
<i class="pe-7s-icon pe-7s-photo"></i>
</div>
</a>
</figure>
<figure class="item gallery" data-groups='["logo"]'>
<a href="images/portfolio/full/3.jpg" class="lightbox f-gallery" title="logo 2">
<img src="images/portfolio/3.jpg" alt="">
<div>
<h5 class="name">logo 2</h5>
<small>Logo</small>
<i class="pe-7s-icon pe-7s-photo"></i>
</div>
</a>
</figure>
<figure class="item gallery" data-groups='["logo"]'>
<a href="images/portfolio/full/3.jpg" class="lightbox f-gallery" title="logo 3">
<img src="images/portfolio/3.jpg" alt="">
<div>
<h5 class="name">logo 3</h5>
<small>Logo</small>
<i class="pe-7s-icon pe-7s-photo"></i>
</div>
</a>
</figure>
<!-- /Portfolio 2 - Logo -->
</div>
<!-- /Portfolio Grid -->
</div>
<!-- /Portfolio Content -->
</div>
</section>
<!-- /Portfolio Subpage -->
Now it works, images filtered on page load. Add this code.
$(document).ready(function() {
$('#portfolio_filters .grph').trigger( "click" );
});
}
// /Portfolio subpage filters
Also I added class "grph" here:
<!-- Portfolio filter -->
<ul id="portfolio_filters" class="portfolio-filters">
<li class="active">
<a class="filter btn btn-sm btn-link active grph" data-group="graphics">Graphics</a>
</li>
<li>
I came here looking for an answer to the same problem, but couldn't get the solution to work, however it successfully pointed me in the right direction to finally solving it by creating a function to execute on page load:
function shuffleInit (id){
$(document).ready(function() {
$('#grid').hide();
jQuery('#'+id)[0].click();
$('#grid').show();
$('#'+id).trigger('click');
});
<body onload="shuffleInit('graphics');">
Remember to add IDs to the filter divs so they can be targeted by the shuffleInit() function. Note that #grid is the default shuffle.js container for the images - I added the hide and show commands to hide the visible re-shuffle animation on page load. The last click trigger line is just a cosmetic addition highlighting the button so the user can see which filter option has been applied.
This works with Bootstrap 3. Hope it helps someone!
I am playing around with this bootstrap template ( github, emptypage code which I use ) and mostly just interested in the sidebar. However I cant seem to get scrollspy working on it in case the side menu gets too long. This is what I have:
<div class="col-md-3 left_col">
<div class="left_col scroll-view">
<div class="navbar nav_title" style="border: 0;">
<i class="fa fa-cogs"></i> <span>Engine of Travel</span>
</div>
<div class="clearfix"></div>
<!-- menu prile quick info -->
<div class="profile">
<div class="profile_pic">
<img src="images/img.jpg" alt="..." class="img-circle profile_img">
</div>
<div class="profile_info">
<span>Welcome,</span>
<h2>User</h2><br/>
</div>
</div>
<!-- /menu quick info -->
<br/>
<!-- sidebar menu -->
<div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
<div class="menu_section">
<h3>Side Side</h3>
<ul class="nav side-menu">
<li><a><i class="fa fa-flag"></i> Sidething <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu" data-spy="scroll" data-target="#child_menu" style="display: none">
<li>Option 2
</li>
<li>Option 3
</li>
...
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
Javascript:
<script type="application/javascript">
$("#child_menu").scrollspy();
</script>
The menu generated displays elements that can fit in the screen and after that 'breaks' as you can see in the image. WHat would be the best way to get scroll to work.
http://jsfiddle.net/um7m89hp/10/
<div class="piGal pull-right">
Some image or <br />
images will go <br />
over here.
</div>
<div class="panel-group pull-left" id="products">
<div class="panel panel-default">
<div class="panel-heading" data-toggle="collapse" data-parent="#products" href="#partnumber1">
<h4 class="panel-title">
<div>
<input type="radio" name="specs">
Some Product Title #1<br />
Some Product Subtitle
</div>
</h4>
</div>
<div id="partnumber1" class="panel-collapse collapse">
<div class="list-group">
<ul class="list-group">
<li class="list-group-item">Some product data</li>
<li class="list-group-item">Some product data</li>
</ul>
</div>
</div>
<div class="panel-heading" data-toggle="collapse" data-parent="#products" href="#partnumber2">
<h4 class="panel-title">
<div>
<input type="radio" name="specs">
Some Product Title #2 <br />
Some Product Subtitle
</div>
</h4>
</div>
<div id="partnumber2" class="panel-collapse collapse">
<div class="list-group">
<ul class="list-group">
<li class="list-group-item">Some product data</li>
<li class="list-group-item">Some product data</li>
</ul>
</div>
</div>
</div>
</div>
The radio button checks only when the text in the panel is clicked. If you click directly on the radio button itself or in the border space it will activate the panel but not check the radio button. Any help on this issue? I'm trying to keep the formatting with the radio button out to the side of the panel text.
Yes, strange behaviour. Something with the BS css on the accordion is my guess. All you need to do is change the trigger for the checking of the radio. I have it on the shown event of the collapse.
$(".panel-collapse").on("shown.bs.collapse", function(event) {
//travel up the DOM to the heading and check the radio
$(this).prev('.panel-heading').find('input').prop("checked", true);
});
here is the fiddle: http://jsfiddle.net/um7m89hp/16/