Display a division upon clicking a hyperlink with a specific class

Question

Display a division upon clicking a hyperlink with a specific class

My goal is to display/fade in a <div> with an ID of "signInHold" when the <li> "Sign In" is clicked, utilizing the class signInActive on the <li>.

<ul class="nav1">
    <li class="nav2">
        <a href="http://rocketcss.com" class="nav2">Home</a>
    </li>
    <li class="nav2">
        <a href="http://rocketcss.com/settings" class="nav2">Settings</a>
    </li>
    <li class="nav2">
        <a href="http://rocketcss.com/download" class="nav2">Download</a>
    </li>
    <li class="nav2 signInActive">
        <a href="http://rocketcss.com/download" class="nav2">Sign In</a>
    </li>
</ul>

I would also appreciate it if you could advise me on whether I need to include:

<script src="http://code.jquery.com/jquery-latest.js"></script>

javascript html css ajax

Answer 1

Answer №1

If you're looking to achieve a particular effect on your website, there are two main ways to go about it. You can either utilize jQuery for its versatility and cross-browser support, or stick with straight CSS if that better aligns with the requirements of your project.

For instance, using jQuery makes implementing effects like fading elements in and out a breeze:

$(".nav1").on("click", ".signInActive", function () {
    $(".bar").fadeIn();
});

Alternatively, achieving the same visual result solely through CSS is also an option:

.foo {
    opacity: 0;
}

.foo.activated {
    transition: opacity 2s;
    opacity: 1;
}

All you need to do is toggle the specified class when necessary:

var element = document.querySelector(".signInActive");
var target  = document.querySelector(".myDIV");

element.addEventListener("click", function () {
    target.classList.toggle("activated");
}, false);

Answer 2

If you're looking to achieve a particular effect on your website, there are two main ways to go about it. You can either utilize jQuery for its versatility and cross-browser support, or stick with straight CSS if that better aligns with the requirements of your project.

For instance, using jQuery makes implementing effects like fading elements in and out a breeze:

$(".nav1").on("click", ".signInActive", function () {
    $(".bar").fadeIn();
});

Alternatively, achieving the same visual result solely through CSS is also an option:

.foo {
    opacity: 0;
}

.foo.activated {
    transition: opacity 2s;
    opacity: 1;
}

All you need to do is toggle the specified class when necessary:

var element = document.querySelector(".signInActive");
var target  = document.querySelector(".myDIV");

element.addEventListener("click", function () {
    target.classList.toggle("activated");
}, false);

Answer 3

Answer №2

If you plan on utilizing jQuery (in the header section)

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>

$(document).ready(function() {

      $("#signInHold").hide();
      $(".signInActive").click(function() {
          $("#signInHold").fadeToggle("slow"); <--This action targets the element with ID signInHold
      });
});

</script>

Answer 4

If you plan on utilizing jQuery (in the header section)

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>

$(document).ready(function() {

      $("#signInHold").hide();
      $(".signInActive").click(function() {
          $("#signInHold").fadeToggle("slow"); <--This action targets the element with ID signInHold
      });
});

</script>

Answer 5

Answer №3

Here is the solution you need:

When the element with the class "signInActive" is clicked, it will show the element with the id "signInHold".

Make sure to have jQuery loaded in your code.

Answer 6

Here is the solution you need:

When the element with the class "signInActive" is clicked, it will show the element with the id "signInHold".

Make sure to have jQuery loaded in your code.

Answer 7

Answer №4

Make sure to include jQuery in your project for this functionality. Add the class "signIn" to your list item (li) element, and once clicked, a div will appear with the class "signInActive" added to it.

<li class="nav2 signIn">
 <a href="http://rocketcss.com/download" class="nav2">Sign In</a>
</li>

$(document).ready(function(){
  $('.signIn').click(function(){
    $('#signInHold').fadeIn(300);
    $(this).addClass('signInActive');
  });
});

Answer 8

Make sure to include jQuery in your project for this functionality. Add the class "signIn" to your list item (li) element, and once clicked, a div will appear with the class "signInActive" added to it.

<li class="nav2 signIn">
 <a href="http://rocketcss.com/download" class="nav2">Sign In</a>
</li>

$(document).ready(function(){
  $('.signIn').click(function(){
    $('#signInHold').fadeIn(300);
    $(this).addClass('signInActive');
  });
});

Display a division upon clicking a hyperlink with a specific class

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What is the best method for validating a div element using Angular UI Bootstrap?

"I'm interested in loading multiple Google Maps using a loop. Can you help

What is the reasoning behind having two identical action buttons in the Kendo UI Upload template?

Implement a delay before sending a new ajax request with jQuery in order to optimize performance

What is the best way to link the roll button to a specific video URL?

Spring controller experienced a 404 not found error when making a jQuery AJAX call

Display toolbar title on small screens in separate lines

Unexpected results are being produced in React due to code, functions are not being executed upon pressing the submit button

Updating the functionality of one-page scrolling - changing to overlap instead of sliding upwards

Properly storing information in the mongoDB

Tips on adjusting my script to focus on particular text within a div in HTML

Do I need to recompile anything after making changes to a node module in my vue.js project in order for the modifications to take effect? The updates are not appearing as expected

What sets 'babel-plugin-module-resolver' apart from 'tsconfig-paths'?

When using jQuery, the function $(this).serialize() will not include input fields that have

Enzyme in Action: Using React.js to Emulate a Click Event

Fatal error encountered in Vscode while running the debug console

Using JavaScript to tally frequency of array values

What's the best way to ensure that a select and button have consistent heights in Bootstrap 5?

Guide to implementing this specific design using CSS within jQuery Mobile

Attempting to eliminate the vertical scroll on my page that matches the height of the navigation bar