I'm trying to implement this gallery on a website: http://ashleydw.github.io/lightbox/
There are no instructions so I'm pretty lost, have been trying to get it to work.
I copied what's below more or less from the source code from the link above.
I moved all the files included in the github download to a new folder dist/lightbox (e.g. ekko-lightbox.css, ekko-lightbox.js).
It's not doing anything, when you click on an image, it just opens the image url.
What am I missing? Do I need to link to some other files or what's wrong?
<head>
<!-- leaving out the other stuff here -->
<link href="dist/lightbox/ekko-lightbox.css" rel="stylesheet">
<link href="dist/css/bootstrap.css" rel="stylesheet">
<link href="dist/css/custom.css" rel="stylesheet">
</head>
<body>
<!-- this is from the source code, just updated the images -->
<h3 class="page-header" id="image-gallery">Example #2: Gallery of Images</h3>
<p>By default, gallery images must be wrapped in a tag (probably <code><div></code>) - which doesn't have the class <code>.row</code>. This is so you can create columns/rows.</p>
<p>A custom selector for the parent can be used, see example #11. Note how the final image is not in the gallery intentionally.</p>
<div class="row">
<div class="col-md-offset-2 col-md-8">
<div class="row">
<a href="images/DSC00978.jpeg" data-toggle="lightbox" data-gallery="multiimages" data-title="People walking down stairs" class="col-sm-4">
<img src="images/DSC00978.jpeg" class="img-responsive"
</a>
<a href="images/DSC00978.jpeg" data-toggle="lightbox" data-gallery="multiimages" data-title="Man getting wet" class="col-sm-4">
<img src="images/DSC00978.jpeg" class="img-responsive">
</a>
<a href="images/DSC00978.jpeg" data-toggle="lightbox" data-gallery="multiimages" data-title="Someone lost their dress" class="col-sm-4">
<img src="images/DSC00978.jpeg" class="img-responsive">
</a>
</div>
</div>
</div>
<script type="text/javascript">
$(document).delegate('*[data-toggle="lightbox"]', 'click', function(event) {
event.preventDefault();
$(this).ekkoLightbox();
});
$(document).ready(function ($) {
// delegate calls to data-toggle="lightbox"
$(document).delegate('*[data-toggle="lightbox"]:not([data-gallery="navigateTo"])', 'click', function(event) {
event.preventDefault();
return $(this).ekkoLightbox({
onShown: function() {
if (window.console) {
return console.log('Checking our the events huh?');
}
},
onNavigate: function(direction, itemIndex) {
if (window.console) {
return console.log('Navigating '+direction+'. Current item: '+itemIndex);
}
}
});
});
//Programatically call
$('#open-image').click(function (e) {
e.preventDefault();
$(this).ekkoLightbox();
});
$('#open-youtube').click(function (e) {
e.preventDefault();
$(this).ekkoLightbox();
});
// navigateTo
$(document).delegate('*[data-gallery="navigateTo"]', 'click', function(event) {
event.preventDefault();
var lb;
return $(this).ekkoLightbox({
onShown: function() {
lb = this;
$(lb.modal_content).on('click', '.modal-footer a', function(e) {
e.preventDefault();
lb.navigateTo(2);
});
}
});
});
});
</script>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="dist/js/bootstrap.min.js"></script>
<script src="js/modal.js"></script>
<script src="dist/lightbox/ekko-lightbox.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
In the end, I got it to work with a different lightbox, http://lokeshdhakar.com/projects/lightbox2/
Related
I am trying to reload the jsTree using ajax load method calling the Action-controller method to load partial view. Initially on page-load the jstree renders fine but after ajax call to update makes it plain ul li items.
I am using HTML data source (UL LI items).
Index.cshtml:
#model List<TreeViewJSDemo.Models.ModelViews.EmployeeNoRootModel>
#{
ViewBag.Title = "About Page";
}
<link href="~/Content/jsTree/docs.css" rel="stylesheet" />
<link href="~/Content/jsTree/themes/default/style.css" rel="stylesheet" />
<div class="row">
<div class="col-md-8">
<button id="refreshTree" class="btn btn-sm">Reload</button><br /><br />
<div id="dv-tree-wrapper">
#{ Html.RenderPartial("_TreePartial", Model); }
</div>
</div>
<div class="col-md-4" id="dv-node-details">
#{ Html.RenderPartial("_NodeDetailPartial", model: TempData["FirstNode"]); }
</div>
</div>
#section Scripts
{
<script src="~/Scripts/jsTree3/jstree.js"></script>
<script type="text/javascript">
$(function () {
LoadTargetTree();
/*********** refresh tree *********** */
$('#refreshTree').on('click', function (event) {
//$('#dv-tree-wrapper').load('#Url.Action("RefreshTree", "Home")');
$('#divtree').jstree('destroy').empty();
$('#dv-tree-wrapper').load('#Url.Action("RefreshTree", "Home")');
LoadTargetTree();
$('#divtree').jstree('refresh');
});
});
function LoadTargetTree() {
$('#divtree')
.jstree({
core: { check_callback: true }
});
}
</script>
}
_TreePartial.cshtml:
#model List<TreeViewJSDemo.Models.ModelViews.EmployeeNoRootModel>
<div id="divtree">
#foreach (var item in Model)
{
<ul id="tree-#item.Id">
<li id="node-#item.Id">
#item.Name
#Html.Partial("_ChildrensPartialNoRoot", item.EmployeeList)
</li>
</ul>
}
</div>
As per Stephen feedback, changed code to call the LoadTargetTree() in the success callback to resolve this issue.
Code Changed:
$('#dv-tree-wrapper').load('#Url.Action("RefreshTree", "Home")', function () { LoadTargetTree();});
I've been working with Bootstrap 4 beta and Stripe.js v3. If you're not familiar with this newer version of Stripe.js, it's basically injecting iframes into spans, and making the spans act as if they are form inputs. I'm not in love with the idea, but it's supposedly more PCI compliant that the older version of Stripe.js (v2).
Demo here: https://codepen.io/skunkbad/pen/BdgYmY
Reducing the HTML down to what represents my credit card input looks like this:
<span id="card-number" class="form-control">
<!-- iframe is injected here by Stripe.js -->
</span>
Due to CSS styles from Bootstrap 4, this span.form-control has a display of "flex", and I have to change that or I can't see what I type into the field.
#card-number.form-control {
display:block;
}
This ends up working fine for all of the browsers I have tried:
Firefox on Ubuntu 16.04
Chrome on Ubuntu 16.04
Internet Explorer on Windows 8.1
Chrome on Android N Phone
Safari on iPad
Safari on iPhone
But on the IOS devices that I've tried (iPad and iPhone), I have to double tap the field to get focus and start typing. The Stripe.js Elements demo on the Stripe website doesn't have this problem, so I'm assuming it's related to Bootstrap 4's CSS.
Full code for your testing enjoyment:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Stripe.js v3 with Bootstrap 4 (beta) Test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<style>
/* Blue outline on focus */
.StripeElement--focus {
border-color: #80BDFF;
}
/* Can't see what I type without this */
#card-number.form-control,
#card-cvc.form-control,
#card-exp.form-control {
display:block;
}
</style>
</head>
<body>
<div class="container-fluid">
<h1 class="mt-5">Stripe.js v3 with Bootstrap 4 (beta) Test</h1>
<div id="card-errors" role="alert"></div>
<div class="card">
<div class="card-body">
<form id="payment-form">
<div class="form-group">
<label for="name">Name on Card</label>
<div class="input-group">
<span class="input-group-addon">A</span>
<input type="text" class="form-control" id="name">
<span class="input-group-addon">B</span>
</div>
</div>
<div class="form-group">
<label for="card-number">Credit Card Number</label>
<div class="input-group">
<span class="input-group-addon">C</span>
<span id="card-number" class="form-control">
<!-- Stripe Card Element -->
</span>
<span class="input-group-addon">D</span>
</div>
</div>
<div class="form-group">
<label for="card-cvc">CVC Number</label>
<div class="input-group">
<span class="input-group-addon">E</span>
<span id="card-cvc" class="form-control">
<!-- Stripe CVC Element -->
</span>
</div>
</div>
<div class="form-group">
<label for="card-exp">Expiration</label>
<div class="input-group">
<span id="card-exp" class="form-control">
<!-- Stripe Card Expiry Element -->
</span>
<span class="input-group-addon">F</span>
</div>
</div>
<button id="payment-submit" class="btn btn-primary">Submit Payment</button>
</form>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<script src="https://js.stripe.com/v3/"></script>
<script>
$(document).ready(function(){
// Create a Stripe client
var stripe = Stripe('pk_test_A45s2laXHrCRj6Tow44dk67z');
// Create an instance of Elements
var elements = stripe.elements();
// Try to match bootstrap 4 styling
var style = {
base: {
'lineHeight': '1.35',
'fontSize': '1.11rem',
'color': '#495057',
'fontFamily': 'apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif'
}
};
// Card number
var card = elements.create('cardNumber', {
'placeholder': '',
'style': style
});
card.mount('#card-number');
// CVC
var cvc = elements.create('cardCvc', {
'placeholder': '',
'style': style
});
cvc.mount('#card-cvc');
// Card number
var exp = elements.create('cardExpiry', {
'placeholder': '',
'style': style
});
exp.mount('#card-exp');
// Submit
$('#payment-submit').on('click', function(e){
e.preventDefault();
var cardData = {
'name': $('#name').val()
};
stripe.createToken(card, cardData).then(function(result) {
console.log(result);
if(result.error && result.error.message){
alert(result.error.message);
}else{
alert(result.token.id);
}
});
});
});
</script>
</body>
</html>
There's only so much one can do to alter the styles and fonts of the Stripe Elements, but again I think the problem is coming from Bootstrap 4's CSS. I've tried fiddling around with the styles of the span, but without success.
So my question is, what specific changes can I make to my CSS that would allow iPad and iPhone users to simply click once like everyone else?
Well, I figured it out, or at least I think I figured it out. I just changed the display type from block to inline-block, and IOS Safari seems a lot happier.
#card-number.form-control {
display:inline-block;
}
I'm not sure why block wouldn't work, because it did for all the other devices I used ... but it is what it is.
I changed my applications so a different page would load when ran but now I receive the error
Unable to get property 'getContext' of undefined or null reference
It's not causing any problems yet but I'm hoping to fix it before it does.
Looking online this usually happens when a <canvas> tag comes before a <script> tag but I cannot find where this is occurring.
#using Application.Models;
#using Newtonsoft.Json;
#{
User user = ViewBag.User;
}
#if (ViewBag.Loader)
{
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<title>#ViewBag.Title - Application Title</title>
<script id="userData" class="userData" type="application/json" data-accurate-up-to="#user.AccurateUpTo">
#Html.Raw(JsonConvert.SerializeObject(user, Newtonsoft.Json.Formatting.None, new JsonSerializerSettings { NullValueHandling = NullValueHandling.Ignore }))
</script>
#Styles.Render("~/Styles/lib")
#Styles.Render("~/Styles/css")
#Scripts.Render("~/Scripts/lib")
</head>
<body>
<!-- Navbar -->
<div id="nav">
<div id="smallLogoHolder">
<img id="smallLogo" src="~/Images/sidewaysLogo.png" />
</div>
<div id="navContents">
<div id="logoHolder">
<img id="logo" src="~/Images/logo.png">
<div id="slogan">Application Name<div id="dayOTheYear"></div></div>
<script>
setInterval(function () {
$("#dayOTheYear").text("(Day: " + moment().dayOfYear() + ")");
}, 1000 * 10);
$("#dayOTheYear").text("(Day: " + moment().dayOfYear() + ")");
</script>
</div>
<ul id="menu">
<li class="navItem #if (ViewBag.Title == "Page 1") { #("activeNavItem"); }">Page 1</li>
<li class="navItem #if (ViewBag.Title == "Page 2") { #("activeNavItem"); }">Page 2</li>
<li class="navItem #if (ViewBag.Title == "Page 3") { #("activeNavItem") ; }">Page 3</li>
<li class="navItem #if (ViewBag.Title == "Page 4") { #("activeNavItem") ; }">Page 4</li>
</ul>
<div id="userSection">
<div id="loginSection">
<div id="loginSectionPic" style="background-image: url(#("path" + User.Identity.Name.Replace("DOMAIN","").Replace("/","").Replace("\\","")))"></div>
<div id="loginSectionContent">
<span id="user">#User.Identity.Name.Replace(#"DOMAIN\", "")</span>
<span id="userType">
#if (user.SecurityGroup.Name != "N/A")
{
#("(" + user.SecurityGroup.Name + ")")
}
else
{
#("(No Role)")
}
</span>
<div><span id="switchUserButton">Switch User</span> | <span id="logoutButton">Logout</span></div>
</div>
</div>
</div>
</div>
</div>
<div class="dialog notificationDialog">
<h2 class="dialogHeader">My Title</h2>
<div class="notificationMeta">Sent by <span class="notificationSubmittedBy"></span><br /><span class="notificationSubmittedTime"></span></div>
<div class="notificationText">
</div>
<input type="button" class="markRead" value="Mark As Read" />
<input type="button" class="closeNotification" value="Close" />
</div>
#RenderBody()
<div id="content">
<span id="loadingMessage">Loading...</span> <img id="dataLoadingGif" src="~/Images/loader.gif" />
<script>
$(window).load(function () {
$.get("#Request.Url.ToString()?loader=0", function (markup) {
$("#loadingMessage").text("Rendering...");
setTimeout(function () {
$("#content").html(markup);
}, 200);
}).fail(function (response) {
console.log(response);
$("#loadingMessage").html("<span style='color:red'>Failed</span><br/><br/>");
$("#dataLoadingGif").remove();
$("#content").append('<iframe id="yellowScreenOfDeathHolder" style="display:block; width:100%; height: 1000px;"></iframe>');
$("#yellowScreenOfDeathHolder").contents().find("html").html(response.responseText);
})
});
</script>
</div>
</body>
</html>
}
else
{
<div id="title">
#ViewBag.Title
#if (ViewBag.Title == "Page 2" || ViewBag.Title == "Page 3")
{
<span class="areaTitle"> - All Areas</span>
}
else if(ViewBag.Title == "Page 1" || ViewBag.Title == "Page 4")
{
if (((User)ViewBag.User).Area != null)
{
<span class="areaTitle"> - #(((User)ViewBag.User).Area.Name)</span>
}
else
{
<span class="areaTitle"> - All Areas</span>
}
}
</div>
#RenderBody()
#Scripts.Render("~/Scripts/app")
}
This is my Layout.cshtml and nothing was changed here, all I did was change some information in my RouteConfig.cs to go to a different page. The reason I linked Layout.cshtml is because when the program is ran it gets through loading Layout.cshtml and then tells me .getContext is null within the jquery
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
name: "Default",
url: "{action}/{id}",
defaults: new { controller = "Home", action = "Page 2", id = UrlParameter.Optional }
All that changed here was Page 2 used to be Page 1, could the <canvas> elements on Page 1 be causing the problems?
Update:
After further investigation it returns the error on the #Scripts.Render("~/Scripts/app") line so I'm wondering if this script should be called elsewhere. Where would be a better place to call it?
I think I found the solution to my problem. Since page 1 requires the #Scripts.Render("~/Scripts/app") line I moved it from the bottom of Layout.cshtml to Page 1.cshtml since Page 1.cshtml isn't the first to load anymore.
I'm currently checking to make sure this doesn't cause errors anywhere else, once I've done that I'll mark this as the answer.
I have problem in loading placeholder on jqueryui accordin click. I have populated according from backend. i need to populate the place holder based on the accordin header click.
this is my html
<html>
<head>
<script>
$(function () {
$('#login').button({ icons: { primary: "ui-icon-person"} });
$('#showDataSource').button({ icons: { primary: "ui-icon-newwin"} });
$('#logout').button({ icons: { primary: "ui-icon-locked"} });
$('#login').click(function () {
var panel = $('#loginPanel').dialog({ modal: true });
panel.parent().appendTo($("form:first"));
});
$('#logout').click(function () {
(function (event) {
});
});
$('#showDataSource').click(function () {
$('#dataSource').dialog({ modal: true, width: 1000, height: 700 });
$('.accordion').accordion({ autoHeight: false, navigation: true, collapsible: true,
active: false,
changestart: function (event, ui) {
var dataSourceID = ui.newHeader.find('a').attr('id');
//var dataSourceColumn = EasyOutputWeb.Services.GetDataSourceColumns(dataSourceID, onsuccess, onError);
$.post(dataSourceID, function (data) {
//ui.newHeader.next("div").html(dataSourceID);
$('#columnPlaceHolder').html(dataSourceID);
});
}
});
});
});
function onsuccess(msg) {
alert(msg);
}
function onError(msg) {
alert(msg);
}
</script>
</head>
<body>
<div id="dataSource" runat="server">
<div class="divtable">
<div class="headrow" id="#accordianHeight">
<div class="divcol">
Data Sources</div>
<div class="divcol" >
Columns</div>
<div class="divcol">
Strong Keys</div>
</div>
<div class="divrow">
<div class="content">
<div class="accordion" id="accordianHeight">
<asp:PlaceHolder ID="dataPlaceHolder" runat="server" />
</div>
</div>
<div class="content">
<div id="dataColumn">
test column
<asp:PlaceHolder ID="columnPlaceHolder" runat="server" />
</div>
</div>
<div class="content" >
<div id="dataKey">
Test key
<asp:PlaceHolder ID="keyPlaceHolder" runat="server" />
</div>
</div>
</div>
</div>
</div>
</body>
</html>
The first mistake here is that you use PlaceHolder that they are not warp with any tag and so jQuery can not grab them. Use Panel that warp with span or div your content.
Second mistake is that when the asp.net renders them the final id of each one is get from the .ClientID property, so the code of jQuery will be as:
$('#<%=columnPlaceHolder.ClientID%>').html(dataSourceID);
And one comment, if you do not actually add any controls on code behind on your Panel's then you simple place a <div id="columnPlaceHolder"></div> code to write on them, and use the jQuery call as it is now (don't add the CliendID)
I'm using several WordPress loops and jQuery UI Tabs that result in the Main tabs and entry-content div markup below. The WordPress loops generate the "entry-post" markup in each tab div, but I'm not showing the php, as the resulting html markup in each tab div is the important part.
I'm also using a bit of jQuery to independently expand/collapse each entry-content div:
$(".entry-content").hide();
$(".entry-title").click(function() {
$(this).parent().children(".entry-content").slideToggle(500); });
What I've found is that each of the entry-content divs keeps their expanded state when switching tabs, i.e. if some of the entry-content divs are expanded in tabone and I switch to tabtwo and then back to tabone, they're still expanded in tabone.
What I need to do is collapse all the entry-content divs in a tab when a tab is changed. Below is the tab init and also the fx to change the tabs.
What do I need to add to this function to collapse all the entry-content divs when a tab is changed?
$(document).ready(function(){
var $tabs= $("#tabs").tabs();
});
$(function() {
$('#tabs').tabs({
fx: { opacity:'toggle' }
});
});
Main tabs and entry-content div markup:
<div id="tabs">
<ul>
<li>tabone</li>
<li>tabtwo</li>
<li>tabthree</li>
</ul>
<div id="tabone">
<div class="entry-post">
<h1 class="entry-title">Title</h1>
<div class="entry-content">Lorem ipsum...
</div></div>
<div class="entry-post">
<h1 class="entry-title">Title</h1>
<div class="entry-content">Lorem ipsum...
</div></div>
<div class="entry-post">
<h1 class="entry-title">Title</h1>
<div class="entry-content">Lorem ipsum...
</div></div>
</div>
<div id="tabtwo">
<div class="entry-post">
<h1 class="entry-title">Title</h1>
<div class="entry-content">Lorem ipsum...
</div></div>
<div class="entry-post">
<h1 class="entry-title">Title</h1>
<div class="entry-content">Lorem ipsum...
</div></div>
<div class="entry-post">
<h1 class="entry-title">Title</h1>
<div class="entry-content">Lorem ipsum...
</div></div>
</div>
<div id="tabthree">
....
</div></div>
The following code should collapse all .entry-content divs whenever a new tab is selected:
$(document).ready(function() {
var $tabs= $("#tabs").tabs({
fx : {
opacity: 'toggle'
},
select : function(event, ui) {
$(".entry-content").hide();
}
});
});
$("div.post [name^="entry-title"]").hide();
should do what you're wanting when attached next to your fx.
or:
$("#tabs a").click(function () {
$("div.post [name^="entry-title"]").hide();
});
I'm not sure i understand you're question completely. But if you wan't to check whether the tab is triggered or not, try use this:
$( ".selector" ).tabs({
show: function(event, ui) { ... }
});
Simplified how you could collapse all divs with class "entry-post", whenever the tab is showed:
$(document).ready(function(){
var $tabs = $("#tabs").tabs({
show: function(){
$('.entry-post').hide();
}
});
});
I'm not a jQuery expert, so here's straight javascript. Might at least help solve the problem...
Since you don't care what tab a div is on (since all divs should be hidden when a tab is changed) you could simply hide all divs on the page every time a tab is changed, regardless of what tab it's on.
var divList = document.getElementsByClassName("entry-content");
for(var divitem in divList){
divitem.style.display = "none";
}
I wish my jQuery was stronger so I could give it in that, but it may help...
Edit:
Just looking at what your example code, I guess something like this in jQuery:
$("#tabs a").click(function() { $(".entry-content").hide(); });
Something that closes all entry-content class divs when any tab is clicked.
You may want to make use of the existing jquery UI tabs library and this will solve a lot of your problems.
http://jqueryui.com/demos/tabs/
Using this will allow you to make a better association between your list items and the divs they are controlling. Add the reference in your header
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
or download it and remove what you don't need. Add the following to your CSS
.ui-tabs .ui-tabs-hide {
display: none !important;
}
and change your references so they are in keeping with the jqueryUI specification
<div id="tabs">
<ul>
<li>tabone</li>
and then the div ids to match
<div id="tabs-1">
<div class="entry-post">
this should make the association. You can then add the controlling behaviour so it should read
$(document).ready(function(){
$(function() {
$('#tabs').tabs();
});
and that will do away with the need to store the array of divs
you can then bind a function to the tabselect event which will hide the divs you want to collapse
$('#tabs').bind('tabsselect', function(event, ui) {
$('#tabs').children().not(ui.panel).children().children(".entry-content").hide();
});
your code should then read:
<head>
<title>Collapse Divs</title>
<style type="text/css">
.ui-tabs .ui-tabs-hide {
display: none !important;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(function() {
$('#tabs').tabs();
});
$('#tabs').bind('tabsselect', function(event, ui) {
$('#tabs').children().not(ui.panel).children().children(".entry-content").hide();
});
$(".entry-content").hide();
$(".entry-title").click(function() {
$(this).parent().children(".entry-content").slideToggle(500);
});
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li>tabone</li>
<li>tabtwo</li>
<li>tabthree</li>
</ul>
<div id="tabs-1">
<div class="entry-post">
...
<h1 class="entry-title">Title 3.3</h1>
<div class="entry-content">Lorem ipsum...</div>
</div>
</div>
</body>