Activate Bootstrap to insert a div underneath an anchor tag

I need assistance with positioning the div content directly below the li a tag. Is there a way to accomplish this?

Check out the FIDDLE

    $(document).ready(function() {
      $('.nav ul li:first').addClass('active');
      $('.tab-content:not(:first)').hide();
      $('.nav ul li a').click(function(event) {
        event.preventDefault();
        var content = $(this).attr('href');
        $(this).parent().addClass('active');
        $(this).parent().siblings().removeClass('active');
        $(content).show();
        $(content).siblings('.tab-content').hide();
      });
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-12">
  <div class=row>
    <div class="col-xs-12">
      <div class="nav">
        <ul>
          <li><a href="#a">Option A</a>
          </li>
          <li><a href="#b">Option B</a>
          </li>
          <li><a href="#c">Option C</a>
          </li>
        </ul>
      </div>
    </div>
    <div class="col-xs-12">
      <div id="a" class="tab-content">
        <h2>Option A</h2>
        <p>Option A</p>
      </div>
      <div id="b" class="tab-content">
        <h2>Option B</h2>
        <p>Option B</p>
      </div>
      <div id="c" class="tab-content">
        <h2>Option C</h2>
        <p>Option C</p>
      </div>
    </div>
  </div>
</div>

Answer №1

        Creating a function called positioning that adjusts the position of an element based on its CSS properties. If the element has a relative position, it calculates its top and left position and applies them to another element specified by the href attribute of the first anchor tag found inside the element.
        
        When the document is ready, the function is executed on the first list item within the navigation menu, which adds an 'active' class to it. Then, all tab contents except the first one are hidden. On click of any anchor tag within the menu items, the corresponding content is shown while adjusting the positioning of the active list item. 
        
        @media (max-device-width: 479px)
        {
            Styling for smaller devices where the active list item in the navigation menu will have a relative position and a minimum height of 100 pixels.
        }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-12">
        <div class=row>
            <div class="col-xs-12">
                <div class="nav">
                    <ul>
                        Menu items with anchor tags linking to corresponding content sections.
                    </ul>
                </div>
            </div>
            <div class="col-xs-12 content">
                Content sections with unique IDs matching the anchor href values.
            </div>
        </div>
    </div>

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

Comparing values inputted from JavaScript using PHP

I am passing values from PHP to a script. <img src=\"images/add.jpg\" onclick='add_program_user(".$value['id_program'].",".$value['min_age'].",".$value['max_age'].")' onmouseover=\"this.style.curso ...

Parsing JSON into a List of Objects

Here is a filter string in the following format: {"groupOp":"AND","rules":[{"field":"FName","op":"bw","data":"te"}]} I am looking to deserialize this into a Generic list of items. Any tips on how I can accomplish this? ...

Tips for positioning an image in the TOP Right corner below the navbar using CSS

I am currently in the process of learning HTML and CSS, and I would like to practice and conduct research whenever I encounter difficulties. Recently, I have been attempting to style my landing page based on a screenshot that I took. However, I have been u ...

various image proportions in HTML

I have an image with a ratio of 16:9 that I want to use on my website. On one of the pages, I display a list of products with images having a ratio of 340x265. When a user clicks on an item in the list, it takes them to the product page where the same im ...

Unable to apply a border to the button

I'm having trouble adding a border to my button on the website. I've tried setting the color, which works fine for the font color within the button, but the border properties are not working. Despite trying some highly rated solutions, none of th ...

"Enhancing User Experience with Multiple Conditional Checkboxes in jQuery

Having difficulty making a checkbox change some HTML content using JQuery. There is a standard html checkbox with the following attributes <input type="checkbox" name="AQN1" class="checkbox Q1" value="AQN10" id="3mcq"> <input type="checkbox" nam ...

The error code 13:5 indicates that the "Home" component has been registered in the Vue application but is not being used, leading to the error message "vue/no-unused-components"

I encountered this issue while working with Vue for the first time. I was attempting to construct a website using Vue/CLI by reorganizing and building from the inside out. However, I am unfamiliar with Vue and unsure how to resolve this error. The changes ...

Place the emoji where the cursor is located

My query was already posted on stack overflow but unfortunately, I did not receive a response. The issue revolves around 2 links named "add emoji 1" and "add emoji 2". As mentioned earlier, my question can be accessed here: Insert smiley at cursor positio ...

Using brackets in a CSS background-image URL will cause it to malfunction and not display the

Try using the brackets editor tool available here. I attempted to add an image to a div with the class "portrait" by linking the style.css file from index.html, but it doesn't seem to be working. Other guides and tutorials have successfully utilized ...

Invalid function call detected, transitioning from Reactjs to Nextjs

After spending some time away from the ReactJS world, I decided to make a comeback and try my hand at NextJS. Unfortunately, I ran into an issue with an Invalid Hook Call. I'm in the process of transitioning my ReactJS project to NextJS. To illustrat ...

Is there another option besides PHP not being compatible with JavaScript?

I'm looking to dynamically change the properties of a div, so I've turned to using the jquery.keyframes plugin. The second class currently has a low-res blurred background image from the croploads directory. Now my goal is to switch it out for a ...

What is the method for defining the href attribute using the parameter passed through ejs?

For my node.js express application, I am utilizing ejs as the view engine. One of the pages in this application is a profile page that displays a user's information. Within this page, there is an anchor tag with the user's email address as the va ...

Convert PHP code into an HTML table

Is it possible to insert date values into an HTML table column using the following code? <?php $startdate = strtotime("Monday"); $enddate = strtotime ("+3 weeks", $startdate); while ($startdate < $enddate) { echo date("M d", $startdate),"& ...

Is your Scrollmagic failing to function once your website is uploaded to the server?

My website incorporates Scrollmagic to dynamically load sections (changing opacity and adding movement) as users scroll through it. Everything functions perfectly fine when I preview the HTML file on my computer, but once I uploaded it to my hosting serv ...

Utilizing radio buttons to toggle the visibility of multiple content sections

In order to determine which P's display on a page, I need to utilize three radio buttons. The items are fetched from a dynamic database, making the process flexible as there is no fixed number of items. Ideally, I would prefer to stick with JavaScript ...

Tips for managing post-generated buttons using jQuery?

I've created buttons using JavaScript and added them to my HTML. Now I want to use jQuery to handle the clicks on b_1 and b_2. How can I make this work? $("#mainbutton").click(function (){ document.getElementById("content").innerHTML = '< ...

Retrieve data from external URL using API

I am encountering a captchas page when attempting to retrieve JSON data from a URL through my API. Even though I am trying to access an array of JSON data containing openPrice, highPrice, price, and lowPrice, all I seem to get is a captcha form instead of ...

ESLint detects the error "screen not found in @testing-library/vue"

When trying to utilize @testing-library/vue with the screen method imported, I encountered an error from ESLint stating: "screen not found in @testing-library/vue". // The render function doesn't give an error but screen does import { render ...

What is the process of including assetlinks.json in an Angular project to enable Android App Links?

Hey everyone, I could really use some assistance! I'm unsure about the specific directory to place the assetlinks.json file and what additional information needs to be included for it to function properly. I do have a SHA256 key and applicationId, so ...

I am currently in the process of conducting an automated test focused on the creation of a new Facebook account

I am currently facing a challenge while attempting an automated test on Facebook. The issue lies in clicking the "Create Account" button using FindElement by id, which is not functioning as expected. public void createAccount(String firstName, String lastN ...