displaying information using specific bootstrap pills

I have a scenario with 3 bootstrap pills where I want to display data in pill 2 and pill 3, but not in pill 1. How can I achieve this without duplicating the data entry?

  <ul class="nav nav-tabs">
    <li><a data-toggle="tab" href="#pill1">Pill 1</a></li>
    <li><a data-toggle="tab" href="#Pill2">Pill 2</a></li>
    <li><a data-toggle="tab" href="#Pill3">Pill 3</a></li>
  </ul>

  <div class="tab-content">
    <div id="pill1" class="tab-pane fade">
     <h3>Pill 1</h3>
      <p>Pill 1 data</p>
    </div>
    <div id="Pill2" class="tab-pane fade">
      <h3>Pill 2</h3>
      <p>Pill 2 data</p>
      <p> THIS DATA SHOULD BE IN PILL 2 AND PILL 3 ONLY</p>
    </div>
    <div id="Pill3" class="tab-pane fade">
      <h3>Pill 3</h3>
      <p>Pill 3 data</p>
    </div>
  </div>
htmlcsstwitter-bootstrapbootstrap-4

Answer №1

How to assign a session variable in Blade:

Session::set('variableName', $value); // Set the value you want to store

Retrieve a session variable in Blade:

Session::get('variableName');

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 steps to properly load "child.vue" into the correct position within "parent.vue" are as follows

Currently I am developing a single page web application using Vue.js. This app consists of 4 "page.vue" files, each with a right and left child .vue component nested inside. For instance, the Page1.vue file is structured as follows (omitting style and scr ...

javascripthtmlcssvue.js

Align the font-awesome icon in the middle of the input box vertically

Is there a way to vertically center the font-awesome icon inside an input box using Bootstrap without setting margins, padding values, or adjusting the height of the input? .inset-0 { top: 0; right: 0; bottom: 0; left: 0; } .inset-y-0 { top: ...

cssbootstrap-4

Cannot interact with button through Selenium Python WebDriver

I've been attempting to click a button on a website using Selenium Webdriver in Python, and I'm having some trouble. The button gets highlighted when I try to click on it, but the click() function doesn't actually click it. Here is the HTML ...

htmlpython-2.7seleniumselenium-webdriver

Avoiding HTML in JavaScript: Tips and Tricks

My application generates numerous elements dynamically based on server data in JSON format. This process involves embedding a significant amount of HTML directly within my JavaScript code, leading to pollution and making it increasingly challenging and l ...

javascriptjqueryhtmlajax

Rearrange two elements by flipping their positions using CSS

I'm working with the following div that contains an input and a label: <div class="js-form-item "> <input type="checkbox" id="checkboxes-11" class="type-checkboxes form-checkbox"> <label for="option-a-checkboxes-11" class=" ...

htmlcss

The Bootstrap carousel component in Wagtail is experiencing an issue where it fails to

I created a carousel featuring three images: <div id="carouselExampleControls" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> {% for loop_cycle in self.carousel_images.all %} {% image loop_cyc ...

bootstrap-4wagtail

I am unable to determine the origin or background of my sidebar

I am having an issue with styling a sidebar using HTML and CSS. The problem I am facing is with setting the background-color property. Despite my efforts to customize the style, the background remains transparent and shows the color of the page beneath it. ...

cssbootstrap-4backgroundsidebar

Despite having unique ids, two file input forms are displayed in the same div in the image preview

Running into a minor issue once again. It may not be the most eloquent query, but I'm genuinely stuck and in need of some assistance. I am attempting to showcase image previews of selected files in a file input form. I have a jQuery script that reads ...

javascriptjqueryhtml

I would like to terminate the property when processing it on a mobile device

<div class="col-sm-24 embed-responsive"> <iframe width="100%" src="http://www.youtube.com/embed/${item.snippet.resourceId.videoId}"></iframe> </div> .embed-responsive iframe { height: 185px; margin-top: -4%; paddin ...

javascriptjqueryhtmlcss

How can I troubleshoot non-functional traffic lights in vue.js?

I've recently built a traffic light using vue.js, but unfortunately, it's not functioning as expected. The colors (red, yellow, and green) are supposed to change according to the time duration, but for some reason, this isn't happening. Can ...

htmlcssvue.js

Automated resizing for various monitor dimensions in HTML

Is there a way to dynamically adjust the zoom level on an HTML webpage based on the monitor size? For instance, an image that appears large on a laptop screen may look small on a PC monitor. Is there a solution available to scale the picture size as the mo ...

javascripthtmlzooming

Layer one div background image over another div background image

My goal is to have the Mario image displayed on top of the background seen in the screenshot below. While I've managed to get it working, I'm struggling to center the Mario image properly over the background. Additionally, I would like to elimina ...

htmlcssimagebackground-image

Elevate Your Flipclock.js

I am currently working on a website that utilizes flipclock.js, but I am facing some challenges in enlarging it to occupy more space on the page. Is there anyone who knows how to upscale or increase its size? ...

cssflipclock

Switch between dropdowns with jQuery

Issue at Hand: In the scenario illustrated below, there is a side navigation bar containing options that reveal a toggled section upon clicking. Specifically, if you select the third item labeled "Dolar" from the menu, a dropdown with three additional cho ...

javascriptjquerycsstoggle

An iframe perfectly centered both horizontally and vertically, featuring a 16:9 aspect ratio and utilizing the maximum screen space without any cropping

Specifications: It is mandatory for the iframe to be enclosed within a div container as shown in the code below. The container should have the flexibility to adjust to any valid width and height using the vw and vh viewport units. Check the code provided ...

javascripthtmlcssiframeresponsive-design

personalizing material-ui component styles – set select component color to be pure white

I am looking to implement a dropdown menu using material-ui components (refer to https://material-ui.com/components/selects/). To do so, I have extracted the specific component from the example: Component return <div> <FormControl variant="outli ...

javascriptcssreactjscomponentsmaterial-ui

What is the best way to ensure a div element on a printed page has a space between its bottom edge and the physical paper, as well as a space between its top

Within my div element lies a collection of other div elements. These elements contain lengthy text that may span multiple pages. I am attempting to print this text starting 50mm from the top edge of every physical paper, and stopping 20mm before the edge o ...

htmlcssprintingmedia-queries

Troubleshooting Issue: Unable to Collapse Bootstrap Responsive Navbar Button with Custom CSS Modifications

I recently created a responsive HTML page using Bootstrap, then converted it to WordPress and made some custom CSS adjustments. In the original HTML version of the page, the navbar collapse button worked perfectly when the screen was resized. However, afte ...

jquerycsstwitter-bootstrapresponsive-designnavbar

How can jQuery determine if multiple selectors are disabled and return true?

I am currently working on a form in which all fields are disabled except for the "textarea" field. The goal is to enable the "valid" button when the user types anything into the textarea while keeping all other inputs disabled. I initially attempted using ...

javascripthtmljqueryforms

Disable button with Checkbox Javascript functionality

In my PHP code, I have an array of users that I pass to the view (in Laravel) and use a foreach loop to display all users in a table. Everything is working fine so far. However, I want to make a "send" button visible when a checkbox is clicked, instead of ...

javascriptphphtmlcheckbox