Creating a popup with multiple tabs using CSS

Struggling to navigate through the intricacies of these code snippets

<!DOCTYPE html>
<html lang ="en">
<head>
<style type="text/css">
a{
  text-decoration:none;
  color:#333;
 }
#pop{
width:557px;
height:400px;
background:#333;
left: 30%;
margin-top:80px;
z-index:999999;
box-shadow: 0px 0px 10px #000;
-webkit-box-shadow: 0px 0px 10px #000;
-moz-box-shadow: 0px 0px 10px #000;
border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
}
#pop2{
width:557px;
height:400px;
background:#333;
left: 30%;
margin-top:80px;
z-index:999999;
box-shadow: 0px 0px 10px #000;
-webkit-box-shadow: 0px 0px 10px #000;
-moz-box-shadow: 0px 0px 10px #000;
border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
}

.content {
width:100%;
background: #fff;
color:#666;
width:500px;
height: 300px;
overflow-y:scroll;
margin:auto;
padding:10px;
text-align:justify;
box-shadow: 0px 0px 10px #333 inset;
-webkit-box-shadow: 0px 0px 10px #333 inset;
-moz-box-shadow: 0px 0px 10px #333 inset;
}

#pop:target{
height:30px;
width:250px;
overflow:hidden;
position:fixed;
bottom:0;
left:236px;
}
#pop2:target{
height:30px;
width:250px;
overflow:hidden;
position:fixed;
bottom:0;
left:236px;
}
</style>
</head>

<a href="#" onclick="document.getElementById('pop').style.display='block';">
    CLICK HERE
</a>  

<div id="pop" style="display:none;">
<div class="buttons-bar">
&nbsp;&nbsp;&nbsp;Header
<a href="" onclick="document.getElementById('pop').style.display='none'">X</a>
<a href="#">></a>
<a href="#pop" >-</a>
</div>
<div class="content">
The standard Lorem Ipsum passage, used since the 1500s
"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."

</div>
</div> 
<a href="#" onclick="document.getElementById('pop2').style.display='block';">
    CLICK HERE
</a>  

<div id="pop" style="display:none;">
<div class="buttons-bar">
&nbsp;&nbsp;&nbsp;Header
<a href="" onclick="document.getElementById('pop2').style.display='none'">X</a>
<a href="#">></a>
<a href="#pop2" >-</a>
</div>
<div class="content">
The standard Lorem Ipsum passage, used since the 1500s
"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."

</div>
</div> 
</html>

The issue resides in using the ":target" pseudo-class, which restricts only one tab from being open at a time. Is there a way to implement multiple tabs that can be simultaneously opened and minimized? Suggestions, including JavaScript solutions, are greatly appreciated. Thank you

javascriptcsstabspopup

Answer №1

Hey there, check out what I put together.

I've designed it to be easily expandable - all you need to do is duplicate the HTML for another tab. If this isn't quite what you were after, just let me know and I can tweak it for you.

Edit: Updated the code so that minimized pop-ups will minimize others and then maximize

http://jsfiddle.net/weissman258/cd866j6h/4/

function expand_collapse(elem) {
    var top_div = elem.parentNode.parentNode.parentNode;
    if (top_div.classList.contains("maximized")) {
        elem.innerHTML = "&#9650;";
        top_div.classList.toggle("minimized", true);
        top_div.classList.toggle("maximized", false);
    } else {
        var popouts = document.getElementsByClassName("pop_out");
        for(var i=0;i<popouts.length;i++) {
            popouts[i].classList.toggle("minimized", true);
            popouts[i].classList.toggle("maximized", false);
            popouts[i].getElementsByClassName("expand_collapse")[0].innerHTML = "&#9650;";
        }
    elem.innerHTML = "&#9660;";
    top_div.classList.toggle("maximized", true);
    top_div.classList.toggle("minimized", false);
    }
}

function close_pop(elem) {
    elem.parentNode.parentNode.parentNode.style.display = 'none';
}
.pop_out {
  background: #333;
  border-radius: 5px 5px 0 0;
  box-shadow: 0px 0px 10px #000;
}
.pop_content {
  background: white;
  font-size: 15px;
  padding: 2px;
}
.minimized {
  display: inline-block;
  margin-right: 10px;
  bottom: 0;
  width: 250px;
  height: 60px;
  overflow: hidden;
}
.maximized {
  top: 0;
  position: fixed;
  display: block;
  width: auto;
  height: auto;
  /* Customize styling for maximized view while ensuring same styles added to minimized view */
}
.close_pop {
  cursor: pointer;
}
.close_pop:hover {
  color: red;
}
.expand_collapse {
  margin-right: 10px;
  cursor: pointer;
}
.expand_collapse:hover {
  color: #ccc;
}
<div style="position:fixed;bottom:-4px;">
  <div class="pop_out minimized">
    <div style="padding:2px;position:relative;"> <span style="margin-left:10px;">Tab 1</span>
      <span style="position:absolute;right:15px;">
     <span class="expand_collapse" onclick="expand_collapse(this);">&#9650;</span>
      <span class="close_pop" onclick="close_pop(this);">X</span></span>
    </div>
    <div class="pop_content">The standard Lorem Ipsum passage, used since the 1500s "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.
    </div>
  </div>
  <div class="pop_out minimized">
    <div style="padding:2px;position:relative;"> <span style="margin-left:10px;">Tab 2</span>
      <span style="position:absolute;right:15px;">
     <span class="expand_collapse" onclick="expand_collapse(this);">&#9650;</span>
      <span class="close_pop" onclick="close_pop(this);">X</span></span>
    </div>
    <div class="pop_content">The standard Lorem Ipsum passage, used since the 1500s "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.
    </div>
  </div>
</div>

Answer №2

Just like this...

$(document).ready(function() {
  $('.show-popup').on('click', function() {
    $('.popup').fadeIn();
  });
  $('.close_pop').on('click', function() {
    $('.popup').fadeOut();
  });
});

var max = true;

function expand_collapse(elem) {
  var top_div = elem.parentNode.parentNode.parentNode;
  if (max === false) {
    elem.innerHTML = "&#9660;";
    top_div.classList.toggle("minimized", false);
    top_div.classList.toggle("maximized", true);
    max = true;
  } else if (top_div.classList.contains("maximized")) {
    elem.innerHTML = "&#9650;";
    top_div.classList.toggle("minimized", true);
    top_div.classList.toggle("maximized", false);
    max = false
  }
}

function close_pop(elem) {
  var top_div = elem.parentNode.parentNode.parentNode;
  top_div.style.display = 'none';
  if (top_div.classList.contains("maximized")) {
    max = false;
  }
};
.popup {
  display: none;
}
.pop_out {
  background: #333;
  border-radius: 5px 5px 0 0;
  box-shadow: 0px 0px 10px #000;
}
.minimized {
  display: inline-block;
  margin-right: 10px;
  bottom: 0;
  width: 250px;
  height: 60px;
  overflow: hidden;
}
.maximized {
  top: 0;
  position: fixed;
  display: block;
  width: auto;
  height: auto;
}
.close_pop {
  cursor: pointer;
  color: #fff;
}
.close_pop:hover {
  color: red;
}
.expand_collapse {
  margin-right: 10px;
  cursor: pointer;
  color: #fff;
  height: 3px;
}
.expand_collapse:hover {
  color: #ccc;
}
a {
  position: fixed;
  top: 150;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<a class="show-popup" href="#">CLICK HERE</a>
<!--Right Here -->
<div class="popup" style="position:fixed;bottom:0px;">
  <div class="pop_out maximized">
    <div style="padding:2px;position:relative;"> <span style="margin-left:10px;">Tab 1</span>
      <span style="position:absolute;right:15px;">
     <span class="expand_collapse" onclick="expand_collapse(this);">&#9660;</span>
      <span class="close_pop">&times</span></span>
    </div>
    <div style="background:white;font-size:15px;padding:2px;">The standard Lorem Ipsum passage, used since the 1500s "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore et 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 culpa qui officia deserunt mollit anim id est laborum.
    </div>
  </div>

</div>

I can now open it from a link. Thank you very much.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The act of exporting an enum from a user-defined TypeScript path leads to the error message "Module not

I have set up a custom path as explained in this particular discussion. "baseUrl": ".", "paths": { "@library/*": [ "./src/myFolder/*" ], } Within this module, I am exporting an Enum. export enum EN ...

javascripttypescriptenums

Choosing a color while hovering over the navigation bar

I'm trying to modify the color of my navigation bar when hovering over it with the mouse. Currently, it's black but I want it to change to a light grey or white color. What am I missing here? HTML: <!DOCTYPE html> <html> <head ...

htmlcsstwitter-bootstrapcolors

Enable the input field once the checkbox has been marked

Here is a checkbox example: <div class="form-group"> <input type="checkbox" id="examination" class="form-control" name="exam" placeholder="Enter Title"> <label>Enable Exam</label> </div> Additionally, I have a disabled inpu ...

javascripthtmlajax

The content within the div section is failing to align precisely in the center of the page

The headers and paragraphs inside the class "center" are not aligning to the center. I have attempted different code combinations but nothing seems to work. Here is my HTML code: It was copied from the Bootstrap website and edited for my project. [HTML c ...

htmlcssbootstrap-4

Display information from dynamically generated pages using Gatsby JS sourcing data from CSV files

I've been working on creating pages in Gatsby JS from a csv file and everything seemed to be going smoothly. However, when it comes to displaying the data on these generated pages, I keep running into issues with undefined variables and can't see ...

javascriptcsvgatsby

The user's input is not being accurately represented when making an AJAX request to the

When attempting to incorporate a user's city input (e.g. Los Angeles) into Ajax URL parameters, there seems to be an issue where the '+' is not being added between "los angels", resulting in a broken URL when console.log(searchURL) is used. ...

javascriptjqueryajax

Reactjs slider causes unexpected useState behavior

I created an autoplay Slider with three cards using the useEffect hook. However, the manual "previous" and "forward" buttons are not functioning correctly. The useState function is not updating values as expected, leading to unexpected changes in state. ...

javascriptreactjsreact-hooksuse-effectuse-state

Rule: attribute should indicate a specific function

I am currently trying to implement the functionality from https://github.com/rpocklin/angular-scroll-animate in my project, but I keep encountering an error in my console: Error: Directive: angular-scroll-animate 'when-visible' attribute must ...

javascriptangularjsangularjs-directiveangularjs-scope

The array of objects has vanished into thin air

I am receiving a JSON string from my server through a PHP file, which contains 25 meals. The PHP script is initiated by a JavaScript function. My goal is to convert the JSON into an array of objects. The response stream displays the correct values and eac ...

phpjavascriptjquery

Is there a built-in constant in the Angular framework that automatically resolves a promise as soon as it

I'm facing a situation where I have code that checks a conditional statement to decide if an asynchronous call should be made. If the condition is not met, the call is skipped. However, I still need to perform some final action regardless of whether t ...

javascriptangularjs

Utilizing one-way data binding with Angular 2 in HTML is similar to the approach used in Angular 1, employing the

Is there a method in Angular 2 to achieve one-way data binding similar to what we did in Angular 1? <!DOCTYPE html> <html lang="en-US"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> &l ...

javascriptangularjsangular2-templatetwo-way-binding

What is the proper way to combine two arrays containing objects together?

I am faced with the challenge of merging arrays and objects. Here is an example array I am working with: [ { name: "test", sub: { name: "asdf", sub: {} } }, { name: "models", sub: {} } ] ...

javascriptarraysreactjstypescriptmerge

Steps for attaching distinct event listeners to individual elements:

I am currently developing a laravel project and I am faced with the task of iterating over a resource using the @foreach blade directive like this: @foreach($users as $user) <p @click="toggleClick">{{ $user->name }}</p> < ...

javascriptlaravelvue.js

Displaying images within a table using innerHTML (Javascript / Html)

Let's start off with some important details: I have a dynamic table that is being generated. The structure of the table is as follows: |item__ | price | category | category | category | category | picture | |chicken| $20 | _______ |_ ______ ...

javascript

Struggling to incorporate a logo into the navigation bar for an HTML project

I'm a beginner in the world of HTML and CSS, trying my hand at creating a homepage. While I managed to add a logo to the Navigation bar, it seems to have messed up the link for the HOME page. Could this be due to not wrapping the logo in a div or imp ...

htmlcss

Switch background and disable hover effect with a click

I'm facing some issues with JavaScript and I can't seem to solve the problem on my own. What I want is, when I click on #footerblock, for the background of #footerblock to change, and then for the footer to lose its "hover effect". <script> ...

javascriptjqueryhtmlcsshover

Create a sleek Bootstrap 4 webpage featuring a fixed footer and navigation bar. However, the challenge lies in ensuring that the content fills the

Currently, I am in the process of creating a template page that includes a navbar and a footer with the intention of adding additional columns within the main div (container-fluid) at a later stage. However, I have encountered two issues that I cannot seem ...

cssbootstrap-4

Issue with invoking controller action in MVC4 via AJAX

Below is the method in my controller: public JsonResult GetRights(string ROLE_ID) { var result = db.APP_RIGHTS_TO_ROLES.Where(r => r.FK_ROLE_ID.ToString() == ROLE_ID).Select(r => r.APP_RIGHTS).ToList(); return Json(re ...

javascriptc#ajaxasp.net-mvc-4

Retrieve database SQL information using JavaScript to display data

I'm struggling to push the value from a textbox to SQL and display it. Despite reading numerous topics, I still can't figure it out. My explanation skills are lacking, but hopefully you can understand what I'm trying to achieve, especially i ...

javascriptphpajaxmysqli

Unable to display text overlay on image in AngularJS

I am experiencing an issue with displaying captions on image modals. .controller('HomeController',['dataProvider','$scope','$location', '$modal', '$log', 'authService', function ...

javascriptangularjsmodal-dialog