{"id":34029,"date":"2023-02-20T11:09:05","date_gmt":"2023-02-20T05:39:05","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-swapping-div-content-using-jquery-closed\/"},"modified":"2023-02-20T11:09:05","modified_gmt":"2023-02-20T05:39:05","slug":"solved-swapping-div-content-using-jquery-closed","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-swapping-div-content-using-jquery-closed\/","title":{"rendered":"[Solved] swapping div content using jquery [closed]"},"content":{"rendered":"

[ad_1]
\n<\/p>\n

\n
\n
<\/div>\n
\n
\n

Here’s my take:<\/p>\n

http:\/\/jsfiddle.net\/bxmaqtd3\/<\/a><\/p>\n

When the button is clicked on the left, we need the div on the right to change content.<\/strong><\/p>\n

My solution uses jquery show()<\/a> and hide()<\/a> to show and hide divs which contain slide content. You will need to include all the content in your html with unique IDs (i.e. #slide1<\/code>, #slide2<\/code>, #slide3<\/code>, etc) and use the css display: none<\/code> on all slides except the first (or default) slide.<\/p>\n

This solution uses a custom data attribute<\/a> to store the ID of the slide div which you want the given button to show. For example:<\/p>\n

<div class=\"bt_wrap\" name=\"1\" data-slide=\"slide1\">\n<\/code><\/pre>\n
When the button on the left is active, I want the styling to remain what it looks like when it’s hovered.<\/strong><\/p>\n
To achieve this I duplicate the :hover<\/code> styles into a new class called active<\/code> when you click on one of the button divs it removes the class<\/a> from all buttons and then adds the class<\/a> to the button you have just clicked. <\/p>\n
JS:<\/p>\n
$('.bt_wrap').click(function(){\n    $('.bt_wrap').removeClass('active'); \/\/remove active class on all buttons\n    $(this).addClass('active'); \/\/add active class to the one that you clicked \n\n  var slideId = $(this).attr('data-slide'); \/\/find the value of the associated slide id \n\n  $('.slide').not(\"#\" + slideId).hide(); \/\/hid all slides except the one you want to show\n\n  $(\"#\" + slideId).show(); \/\/show the one you want to show\n\n});\n<\/code><\/pre>\n
CSS:<\/p>\n
#slide1 {\n  display: block;\n}\n\n#slide2 {\n  display: none;\n}\n\n.active .box {\n   transform: rotateY(-90deg);\n}\n\n.active {\n    background: blue;\n}\n<\/code><\/pre>\n
HTML:<\/p>\n
<head>\n  <link rel=\"stylesheet\" href=\"https:\/\/stackoverflow.com\/questions\/51086958\/path\/to\/font-awesome\/css\/font-awesome.min.css\">\n<\/head>\n\n<div class=\"main\">\n  <div id=\"wrapper\" class=\"steps\">\n    <div class=\"bt_wrap\" name=\"1\" data-slide=\"slide1\">\n      <div class=\"box\">\n        <i class=\"icon fa fa-clipboard\">\n          <span ng-class=\"{'started': c.data.questionnaire}\" class=\"fa fa-check-circle\"><\/span>\n        <\/i>\n        <i class=\"icon2 fa fa-clipboard\">\n          <span ng-class=\"{'started': c.data.questionnaire}\" class=\"fa fa-check-circle\"><\/span>\n        <\/i>\n      <\/div>\n    <\/div>\n    <div class=\"bt_wrap\" name=\"2\" data-slide=\"slide2\">\n      <div class=\"box\">\n        <i class=\"icon fa fa-building\">\n          <span ng-class=\"{'started': c.data.work_history}\" class=\"fa fa-check-circle\"><\/span>\n        <\/i>\n        <i class=\"icon2 fa fa-building\">\n          <span ng-class=\"{'started': c.data.work_history}\" class=\"fa fa-check-circle\"><\/span>\n        <\/i>\n      <\/div>\n    <\/div>\n    <div class=\"bt_wrap\" name=\"3\">\n      <div class=\"box\">\n        <i class=\"icon fa fa-users\">\n          <span ng-class=\"{'started': c.data.beneficiaries}\" class=\"fa fa-check-circle\"><\/span>\n        <\/i>\n        <i class=\"icon2 fa fa-users\">\n          <span ng-class=\"{'started': c.data.beneficiaries}\" class=\"fa fa-check-circle\"><\/span>\n        <\/i>\n      <\/div>\n    <\/div>\n    <div class=\"bt_wrap\" name=\"4\">\n      <div class=\"box\">\n        <i class=\"icon fa fa-university\">\n          <span ng-class=\"{'started': c.data.tax}\" class=\"fa fa-check-circle\"><\/span>\n        <\/i>\n        <i class=\"icon2 fa fa-university\">\n          <span ng-class=\"{'started': c.data.tax}\" class=\"fa fa-check-circle\"><\/span>\n        <\/i>\n      <\/div>\n    <\/div>\n    <div class=\"bt_wrap\" name=\"5\">\n      <div class=\"box\">\n        <i class=\"icon fa fa-file-pdf-o\"><\/i>\n        <i class=\"icon2 fa fa-file-pdf-o\"><\/i>\n      <\/div>\n    <\/div>\n  <\/div>\n  <div class=\"content\">\n    <div id=\"slide1\" class=\"slide form-container\">\n      <h2 class=\"form-title\">Welcome to Your Employment Guide!<\/h2>\n      <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<\/h4>\n      <div class=\"text-center\">\n        <input type=\"button\" value=\"NEXT\" class=\"btn btn-primary next\">\n      <\/div>\n    <\/div>\n\n    <div id=\"slide2\" class=\"slide form-container\">\n      <h2 class=\"form-title\">Some other title<\/h2>\n      <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <\/h4>\n      <div class=\"text-center\">\n        <input type=\"button\" value=\"NEXT\" class=\"btn btn-primary next\">\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n<\/code><\/pre>\n<\/p><\/div>\n
<\/div>\n<\/div>\n
            <\/span> <\/p><\/div>\n<\/div>\n
[ad_2]<\/p>\n
solved swapping div content using jquery [closed] <\/p>\n","protected":false},"excerpt":{"rendered":"
[ad_1] Here’s my take: http:\/\/jsfiddle.net\/bxmaqtd3\/ When the button is clicked on the left, we need the div on the right to change content. My solution uses jquery show() and hide() to show and hide divs which contain slide content. You will need to include all the content in your html with unique IDs (i.e. #slide1, … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[320],"tags":[464,346,333,388],"class_list":["post-34029","post","type-post","status-publish","format-standard","hentry","category-solved","tag-css","tag-html","tag-javascript","tag-jquery"],"yoast_head":"\n[Solved] swapping div content using jquery [closed] - JassWeb<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jassweb.com\/solved\/solved-swapping-div-content-using-jquery-closed\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] swapping div content using jquery [closed] - JassWeb\" \/>\n<meta property=\"og:description\" content=\"[ad_1] Here’s my take: http:\/\/jsfiddle.net\/bxmaqtd3\/ When the button is clicked on the left, we need the div on the right to change content. My solution uses jquery show() and hide() to show and hide divs which contain slide content. You will need to include all the content in your html with unique IDs (i.e. #slide1, ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jassweb.com\/solved\/solved-swapping-div-content-using-jquery-closed\/\" \/>\n<meta property=\"og:site_name\" content=\"JassWeb\" \/>\n<meta property=\"article:published_time\" content=\"2023-02-20T05:39:05+00:00\" \/>\n<meta name=\"author\" content=\"Kirat\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kirat\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-swapping-div-content-using-jquery-closed\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-swapping-div-content-using-jquery-closed\\\/\"},\"author\":{\"name\":\"Kirat\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#\\\/schema\\\/person\\\/65c9c7b7958150c0dc8371fa35dd7c31\"},\"headline\":\"[Solved] swapping div content using jquery [closed]\",\"datePublished\":\"2023-02-20T05:39:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-swapping-div-content-using-jquery-closed\\\/\"},\"wordCount\":178,\"publisher\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#organization\"},\"keywords\":[\"css\",\"html\",\"javascript\",\"jquery\"],\"articleSection\":[\"Solved\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-swapping-div-content-using-jquery-closed\\\/\",\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-swapping-div-content-using-jquery-closed\\\/\",\"name\":\"[Solved] swapping div content using jquery [closed] - JassWeb\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#website\"},\"datePublished\":\"2023-02-20T05:39:05+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-swapping-div-content-using-jquery-closed\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-swapping-div-content-using-jquery-closed\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-swapping-div-content-using-jquery-closed\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] swapping div content using jquery [closed]\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#website\",\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/\",\"name\":\"JassWeb\",\"description\":\"Build High-quality Websites\",\"publisher\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#organization\",\"name\":\"Jass Web\",\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/jassweb.com\\\/wp-content\\\/uploads\\\/2021\\\/02\\\/jass-website-logo-1.png\",\"contentUrl\":\"https:\\\/\\\/jassweb.com\\\/wp-content\\\/uploads\\\/2021\\\/02\\\/jass-website-logo-1.png\",\"width\":693,\"height\":132,\"caption\":\"Jass Web\"},\"image\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#\\\/schema\\\/person\\\/65c9c7b7958150c0dc8371fa35dd7c31\",\"name\":\"Kirat\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/wp-content\\\/litespeed\\\/avatar\\\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1779427625\",\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/wp-content\\\/litespeed\\\/avatar\\\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1779427625\",\"contentUrl\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/wp-content\\\/litespeed\\\/avatar\\\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1779427625\",\"caption\":\"Kirat\"},\"sameAs\":[\"http:\\\/\\\/jassweb.com\"],\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/author\\\/jaspritsinghghumangmail-com\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[Solved] swapping div content using jquery [closed] - JassWeb","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/jassweb.com\/solved\/solved-swapping-div-content-using-jquery-closed\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] swapping div content using jquery [closed] - JassWeb","og_description":"[ad_1] Here’s my take: http:\/\/jsfiddle.net\/bxmaqtd3\/ When the button is clicked on the left, we need the div on the right to change content. My solution uses jquery show() and hide() to show and hide divs which contain slide content. You will need to include all the content in your html with unique IDs (i.e. #slide1, ... Read more","og_url":"https:\/\/jassweb.com\/solved\/solved-swapping-div-content-using-jquery-closed\/","og_site_name":"JassWeb","article_published_time":"2023-02-20T05:39:05+00:00","author":"Kirat","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kirat","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jassweb.com\/solved\/solved-swapping-div-content-using-jquery-closed\/#article","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/solved-swapping-div-content-using-jquery-closed\/"},"author":{"name":"Kirat","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31"},"headline":"[Solved] swapping div content using jquery [closed]","datePublished":"2023-02-20T05:39:05+00:00","mainEntityOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-swapping-div-content-using-jquery-closed\/"},"wordCount":178,"publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"keywords":["css","html","javascript","jquery"],"articleSection":["Solved"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/jassweb.com\/solved\/solved-swapping-div-content-using-jquery-closed\/","url":"https:\/\/jassweb.com\/solved\/solved-swapping-div-content-using-jquery-closed\/","name":"[Solved] swapping div content using jquery [closed] - JassWeb","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/#website"},"datePublished":"2023-02-20T05:39:05+00:00","breadcrumb":{"@id":"https:\/\/jassweb.com\/solved\/solved-swapping-div-content-using-jquery-closed\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jassweb.com\/solved\/solved-swapping-div-content-using-jquery-closed\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jassweb.com\/solved\/solved-swapping-div-content-using-jquery-closed\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jassweb.com\/solved\/"},{"@type":"ListItem","position":2,"name":"[Solved] swapping div content using jquery [closed]"}]},{"@type":"WebSite","@id":"https:\/\/jassweb.com\/solved\/#website","url":"https:\/\/jassweb.com\/solved\/","name":"JassWeb","description":"Build High-quality Websites","publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jassweb.com\/solved\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jassweb.com\/solved\/#organization","name":"Jass Web","url":"https:\/\/jassweb.com\/solved\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/","url":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","contentUrl":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","width":693,"height":132,"caption":"Jass Web"},"image":{"@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31","name":"Kirat","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1779427625","url":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1779427625","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1779427625","caption":"Kirat"},"sameAs":["http:\/\/jassweb.com"],"url":"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/"}]}},"_links":{"self":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/34029","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/comments?post=34029"}],"version-history":[{"count":0,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/34029\/revisions"}],"wp:attachment":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/media?parent=34029"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/categories?post=34029"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/tags?post=34029"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}