should do this:
a progress bar appears, followed by thunbnails.. if it' working.
Can someone please simply explain to me what i have written wrong in my markup?
I don't understand what might be the issue here so I am asking here,
My site: http://env-3884279.jelastic.servint.net/bot2/
if the 0% does not appear, it's working incorrectly,
refuses to run in any other browser except firefox. why?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>capri</title>
<!-- Bootstrap -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body class="container" style="background-color: white; color: #333; font-family: 'Segoe UI';">
<br /><br />
<div>
<div id="status" class="pull-left"></div>
<div id="total" class="pull-right bg-success table-bordered" style="padding: 6px;">0 Movies Processed.</div>
<div class="clearfix"></div>
<br />
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
</div>
</div>
<br />
<div class="clearfix"></div>
<div class="row-fluid" id="pagelist" style="border-top: solid whitesmoke 4px;">
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script>
var processed = 0;
function ScanPage(pagenum, callback) {
$("#status").html("Please Wait... ");
$('.progress-bar').hide();
$('.progress-bar').css('width', 0 + '%').attr('aria-valuenow', 0).html(0 + '%');
$.ajax({
url: "movies/merdb/scanpage.php?token=" + Math.random() + "&p=" + pagenum,
cache: false,
async: true,
type: "GET"
}).done(function (html) {
var done = 0;
var json = JSON.parse(html);
var count = Object.keys(json).length;
$('.progress-bar').show();
$.each(json, function (iter) {
$.ajax({
url: "movies/merdb/parsepageresults.php?token=" + Math.random() + "&match=" + json[iter],
cache: false,
async: false,
type: "GET"
}).done(function (response) {
if (response != undefined && response != "") {
$("#status").html("<i class=\"fa fa-spinner fa-spin\"></i> Page <span class=\"badge\" style=\"background-color: whitesmoke; font-size: 16px;color: black;\">" + pagenum + "</span> Processing " + (done + 1) + " of " + count);
$("#pagelist").append("<div style=\"padding: 5px;\" class=\"col-xs-2\"><img src=" + response + " width=\"150\" height=\"225\"></div>");
var vpercent = parseInt(done * 100 / count);
$('.progress-bar').css('width', vpercent + '%').attr('aria-valuenow', vpercent).html(vpercent + '%');
}
done++;
processed++;
$("#total").html(processed + " Movies Processed.");
});
});
$("#status").html("Scanning Page " + pagenum + " has completed. <span class=\"glyphicon glyphicon-ok\" style=\"color: green\"> </span>");
callback(pagenum + 1);
});
}
function Begin(index) {
ScanPage(index, OnCompleted);
}
function OnCompleted(index)
{
$("#pagelist").html("");
Begin(index);
}
Begin(1);
</script>
</body>
</html>
Try to put all yours script's <script src="https://aja.... that you have on top.
Remove the
$('.progress-bar').hide();
if you want to see the 0%
Also the base64 returned is not correct and chrome is trying to download from a url
you are getting
"data:jpg;base64,......"
when you should be getting
"data:image/jpg;base64,...."
Your Ajax minified java script is not responding properly. Try to put both minified java script in head section of HTML. Try to download and save the minified code and run it through your machine so process will be little faster.
Related
I am trying to to display JSON data from an external location (3 images with a city name and tagline) onto my HTML page but getting an error:
"Uncaught ReferenceError: showPlaces is not defined
at places.json:1:1" even though I did define the function already in my JS file.
JSON data: https://www.selicaro.com/webd330/week6/places.json
https://codepen.io/stefan927/pen/MWOqxmN?editors=1111
*<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
integrity="sha384-
9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="jsonp.css" />
<title>Week 6 | Assignment | JSONP</title>
</head>
<body>
<div class="container">
<h3 class="card-title">
Assignment: Load JSONP from an External Server
</h3>
<form>
<div class="form-group">
<button
type="button"
class="btn btn-primary mx-auto d-block"
id="btn2"
>
Load JSON
</button>
</div>
</form>
<div id="output"></div>
</div>
<!-- Optional JavaScript -->
<script>
(function() {
var btn = document.getElementById('btn2');
btn.addEventListener('click', getJson);
function getJson() {
var output = document.getElementById('output');
output.setAttribute("class", "card-group");
var xhr = new XMLHttpRequest();
var url = 'https://www.selicaro.com/webd330/week6/places.json'
xhr.open('GET', url, true);
xhr.onload = function(data) {
if (this.readyState === 4) {
if (this.status === 200) {
var data = JSON.parse(this.responseText);
function showPlaces(data) {
var content = '';
for (i = 0; i < data.places.length; i++) {
content += '<div class="card" style="width: 20rem;">'
content += '<img class="card-img-top" src=" data.places[i]["img"]
+ '
" alt="
image of city ">';
content += '<div class="card-body">';
content += '<h5 class="card-title">' + data.places[i].loc '</h5>';
content += '<p class="card-text">tagline: ' + data.places[i]
["tagline"] + '</p>';
content += '</div></div>';
}
document.getElementById('output').innerHTML = content;
}
}
}
xhr.send(null);
}
}
})();
</script>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<!--Your JS files go below this comment-->
<script src="week6.js"></script>
<script src="https://www.selicaro.com/webd330/week6/places.json"></script>
<script
src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-
q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"
integrity="sha384-
cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"
integrity="sha384-
uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm"
crossorigin="anonymous"
></script>
</body>
</html>*
i want to add weather on my website. i tried to do it with json and jquery, but i have some problems. can you help me or advise me other way to do this, please? the problem is that in console show that these json links which i have in html page in are incorrect. please help me. what can i do?
here is my code
if("geolocation" in navigator){
navigator.geolocation.getCurrentPosition(function(position){
loadweather(position.coords.latitude + "," + position.coords.longitude);
});
}else {
loadweather("kolkata, in" );
}
$(document).ready(function(){
setInterval(getWeather, 10000);
});
function loadWeather (location, woeid){
$.simpleWeather({
location:location,
woeid:woeid,
unit:'c',
suncess:function(weather){
city = weather.city,
temp = weather.temp+'°';
wcode = '<img class="weathericon" src=images/weathericons/' + weather.code + '.svg';
wind = '<p>' + weather.wind.speed + '</p><p>' + weather.units.speed +'</p>';
humidity = weather.humidity + '%';
$(".location").text(city);
$(".temperature").html(temp);
$(".climate_bg").html(wcode);
$(".windspeed").html(wind);
$(".humidity").text(humidity);
},
error: function(error) {
$(".error").html('<p>' + error + '</p>');
}
});
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0">
<title>Weather App</title>
<link href="http://fonts.googleapis.com/css?family=Montserrat:400,700,inherit,400" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/standardize.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body class="body page-index clearfix">
<div class="container clearfix">
<p class="location"></p>
<p class="temperature"></p>
<div class="climate_bg"></div>
<div class="info_bg">
<img class="dropicon" src="images/Droplet.svg">
<p class="humidity"></p>
<img class="windicon" src="images/Wind.svg">
<div class="windspeed"></div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.simpleWeather/3.1.0/jquery.simpleWeather.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
I'm testing the Youtube Data API V3 to get a list videos by a query term and subsequently play them in an iframe.
I'm getting this error:
www-embed-player.js:306 GET https://googleads.g.doubleclick.net/pagead/id?exp=nomnom net::ERR_BLOCKED_BY_CLIENT
After some debugging and googling, I discovered that this error is often caused by adblockers. I've then disabled mine on Chrome and then retested the api call.
I no longer see the original error :ERR_BLOCKED_BY_CLIENT but my videos retrieved do not play. Player message: An error occurred, please try again later.
Below is the code. The JS is in the HTML file itself for simplicity.
Any help appreciated!
<!doctype html>
<html lang="en">
<head>
<title>Youtube API Test </title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb"
crossorigin="anonymous">
</head>
<style>
body {
background-color: #0F0F0F;
}
button.btn.btn-primary {
background-color: #E12523;
border-color: #E12523;
}
div.jumbotron {
background-color: #292929;
color: #B3B3B3;
}
hr.my-2 {
border: 1px solid #B3B3B3;
}
</style>
<body>
<div class="wrapper container">
<div class="jumbotron">
<h1 class="display-3">Youtube Api</h1>
<p class="lead">Let's use the Yotube Api to get videos</p>
<hr class="my-2">
<form>
<div class="form-group">
<label for="user-query"></label>
<input type="text" class="form-control" id="user-query" aria-describedby="emailHelp" placeholder="Search Youtube">
</div>
<button type="submit" class="btn btn-primary" id="submit">Submit</button>
</form>
</div>
</div>
<div class="container" id="results"></div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ"
crossorigin="anonymous"></script>
<script type="text/javascript">
//Get Videos
$("#submit").on("click", function (event) {
event.preventDefault();
var queryTerm = $("#user-query").val().trim();
$.ajax({
url: "https://www.googleapis.com/youtube/v3/search?part=snippet&q=" + queryTerm + "&type=video&key=[MY API KEY]",
method: "GET"
}).then(function (data) {
console.log(data);
$.each(data.items, (i, item) => {
console.log(data.item);
const videoId = item.id.videoId;
let $iFrameContainer = $(`<iframe width="420" height="345" src="https://www.youtube.com/embed/"' ${videoId} '> <\/iframe >`);
$("#results").append($iFrameContainer);
})
});
})
</script>
</body>
</html>
I've tried to use a multitude of different scripts with my Behance API key to try and create an online portfolio updated automatically through my managing of my Behance Profile.
The one I'm using now is the simplest I've found, using only jQuery, JSON, and is integrated with Bootstrap by Twitter.
Here's my source code:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Portfolio with Behance API & jQuery</title>
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.8/slick.min.css" rel="stylesheet">
<link href="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.8/slick-theme.min.css" rel="stylesheet">
<link href="vendor/prism.css" rel="stylesheet">
<!-- http://fontpair.co/ -->
<link href="//fonts.googleapis.com/css?family=Quando|Judson" rel="stylesheet">
<!-- Demo stylesheet -->
<link href="demo.css" rel="stylesheet">
</head>
<body class="demo">
<div class="demo-intro">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<a href="http://siamkreative.com/">
<img src="https://secure.gravatar.com/avatar/f634817190acb57d0f3e61e7c68eabbb?s=160" alt="Julien Vernet" class="avatar img-circle">
</a>
<h1>Bootstrap Portfolio<br> with Behance API & jQuery</h1>
<p class="lead">If you're using Behance to showcase your projects and you would like to embed your portfolio on your site, look no further.</p>
<p>This quick example show you how to retrieve your projects from Behance using their API, store the data in the browser, and display it using Bootstrap 3 markup. To render the template we use jQuery, but you could also use a template engine such as pure.js or handlebars. Find the most suitable template engine here.</p>
<div class="btn-group" role="group">
Grid Layout
Slider Layout
</div>
</div>
</div>
</div>
</div>
<div class="demo-grid" id="grid">
<div class="container">
<h2>Grid Layout <small>Using Bootstrap Grid</small></h2>
<div id="be_grid" class="row be__portfolio be__grid">Loading...</div>
</div>
</div>
<div class="demo-slider" id="slider">
<div class="container">
<h2>Slider Layout <small>Using Slick Carousel</small></h2>
<div id="be_slider" class="row be__portfolio be__slider">Loading...</div>
</div>
</div>
<div class="demo-source" id="source">
<div class="container">
<h2>Source code</h2>
<!-- http://prismjs.com/plugins/file-highlight/ -->
<pre class="line-numbers" data-src="https://raw.githubusercontent.com/SiamKreative/Bootstrap-Portfolio-Behance-API/master/jquery.behance.js"></pre>
</div>
</div>
<div class="demo-comments">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<h3>Leave your feedback below :)</h3>
<br>
<div id="disqus_thread"></div>
</div>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/layzr.js/1.4.3/layzr.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.8/slick.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-smooth-scroll/1.5.6/jquery.smooth-scroll.min.js"></script>
<script src="vendor/prism.js"></script>
<script src="jquery.behance.js"></script>
<script>
$(function() {
$('a').smoothScroll();
});
</script>
<script>
(function() {
var d = document, s = d.createElement('script');
s.src = '//siamkreative.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
</body>
</html>
Here's the jQuery:
$(function () {
var beUsername = 'josephrobee27e',
beApiKey = 'ugCqRrCuAuHAD6gvDTmegYXLxO2lWVca',
bePerPage = 12,
beProjectAPI = '//www.behance.net/v2/users/' + beUsername + '/projects?callback=?&api_key=' + beApiKey + '&per_page=' + bePerPage,
beItemWidth = 360,
beItemHeight = 282,
beLazyLoad = true,
beLinkTarget = '_self';
/**
* Get Data from Behance API
*/
if (sessionStorage.getItem('behanceProject')) {
setPortfolioTemplate();
} else {
// Load JSON-encoded data from the Behance API & Store it in sessionStorage
$.getJSON(beProjectAPI, function (project) {
sessionStorage.setItem('behanceProject', JSON.stringify(project));
setPortfolioTemplate();
});
}
/**
* Populate Data
*/
function setPortfolioTemplate() {
var projects = JSON.parse(sessionStorage.getItem('behanceProject')).projects;
var portfolio = $('.be__portfolio').html('');
var items = '';
var image = '';
$.each(projects, function (i, val) {
// If Lazy load is enabled, edit the markup accordingly
beLazyLoad ? image = 'src="images/loading.png" data-lazy="' + val.covers.original + '"' : image = 'src="' + val.covers.original + '"';
// Create the items template
items += '<div class="be__item be__item__' + val.id + ' col-lg-4 col-md-4 col-sm-4 col-xs-6 col-xxs-12">';
items += '<a href="' + val.url + '" title="' + val.name + '" target="' + beLinkTarget + '">';
items += '<img class="img-responsive" ' + image + ' width="' + beItemWidth + '" height="' + beItemHeight + '" alt="' + val.name + '">';
items += '</a>';
items += '</div>';
// How many items are shown
return i < bePerPage;
});
// Append items only once
portfolio.each(function (index, el) {
$(el).append(items);
});
// Create Lazy Load instance for Grid Layout
if (beLazyLoad) {
var layzr = new Layzr({
container: '.be__grid',
selector: '[data-lazy]',
attr: 'data-lazy'
});
}
// Slider Layout
$('.be__slider').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 1,
lazyLoad: 'ondemand',
responsive: [{
breakpoint: 768,
settings: {
slidesToShow: 2,
slidesToScroll: 1
}
}, {
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}]
});
}
});
I see no issues in the code. However this is all that is displayed:
Lastly here's a screen shot of the JSON file it's pulling, so I know that it's printing the information the script requires:
Any help will be seriously appreciated. I honestly have no clue what I'm doing wrong. I included my username and API key because I thought maybe my account was set up wrong and maybe someone could help me with that also.
Turns out for whatever reason the application did not work on a local machine.
I'm currently making a list that creates categories based on user input through a text field. Each time the create button is clicked my JavaScript is called and adds a div that should be collapsible to show a list.
Right now I only have a button collapsing underneath but there will be additional content after I can get the collapse operational.
HTML: The JQuery UI is for potential drag-drop functionality later:
<link href="main.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.3.0.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"
integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<!--
Bootstrap is a lightweight and relativley flexible framework that is great for responsive sites.
Although there are some downsides, as with almost anything, it is great for getting a good looking site up and running quickly.
This would allow this To Do List to be used just as easily on a mobile device while still maintaining an attractive look.
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div class="container">
<div class="h1 row text-center" id="main-header">To Do List</div>
<div class="row" id="category-anchor">
<div role="form" class="form-inline">
<label id="category-label">New Category: </label>
<input type="text" id="new-category" class="form-control">
<button id="create-category" class="btn btn-primary form-control" onClick="createCategory()">Create</button>
</div>
</div>
<li id="anchor">
</li>
</div>
</body>
<script src="todo.js"></script>
</html>
Here is my tiny bit of CSS:
* {
font-family: Serif;
}
#main-header {
font-weight: bold;
background-color: #00ffff;
margin-top: 0px;
}
#category-label {
font-size: 150%;
}
#create-category {
font-weight: bold;
font-family: Sans-serif;
font-size: 100%;
}
li {
list-style-type: none;
}
JavaScript:
var categoryID = 0;
var todoListID = 1000;
function createCategory() {
var newCategory = document.getElementById("new-category").value;
if(newCategory.trim().length != 0) {
var categoryRow = '<div id="' + categoryID + '" class="category">';
categoryRow += '<div class="h2 row text-center" data-toggle="collapse" data-target="#' + todoListID + '">' + newCategory + '</div>';
categoryRow += '</div>';
document.getElementById("new-category").value = "";
}
$(categoryRow).appendTo("#anchor");
addToDoList();
categoryID++;
todoListID++;
}
function addToDoList() {
var list = '<div id="' + todoListID + '" class="list collapse">';
list += '<div class="row">';
list += '<button class="btn btn-success create-list">New ToDo</button>';
list += '</div>';
list += '</div>';
$(list).appendTo("#" + categoryID);
}
If I use "collapse in" the button shows but the above div is still not collapsible.